The New York Times: Moving to GraphQL

Moving to GraphQL
Scott Taylor, The New York Times
GraphQL Summit 2017
San Francisco, CA

Scott Taylor
• I live in Brooklyn, NY with my wife, Allie (+ cats)
• Sr. Software Engineer, Web Frameworks 
The New York Times
• WordPress core team
• Musician
• @wonderboymusic on Twitter
• @staylor on GitHub

Goals
• Simplify our stack

• One place to add and retrieve data

• Common language / repository for creating / reusing
components

• Make onboarding easier

Our Last Replatform
• NYT5 - 4 short years ago
• “We are never taking this long on a project
ever again” - our CEO at the champagne
toast celebrating the above.
• (We are taking this long on the project
currently)

So WHY replatform?
• Consistency: Design changes should affect
as few codebases as possible
• Desktop and mobile apps will be one
• iPhone and iPad rewritten as one in Swift
• Android and iOS render WebViews

Technical Notes
• moving Datacenter apps to Google Cloud
Platform

• NYTimes/drone-gke 
NYTimes/drone-gae

• Moving data pipeline to internal schema that
uses ProtoBufs / writes to Kafka

• KYT: manages conﬁguration of Node

GraphQL at the NYT
• the GraphQL server is a Sangria app, written
in Scala, maintained by a data team called
Samizdat

• the frontend is a universal Relay (Classic)
app, running on Node/Express, maintained
by the Web Frameworks team

React/GraphQL at
the NYT. Why?

Do Not Mirror Legacy Data
(we mirrored legacy data)

Versioning
(we versioned the schema)

Pivots
• initially mirrored REST schema

• versioned the schema / generated from ProtoBufs

• versioned the schema again, driven by product

• after going all in on designing schema using NYT design
terminology, decided to remove some abstractions to
avoid fragment complexity

• v0.1.0 through 0.7.3 were all released (on GitHub)  
on March 4, 2016

• v0.8.0 was April 2016

• v0.9.0 was May 2016

• v0.9.1 was June 2016

• v0.9.2 was July 2016

• v0.9.3 was September 2016

• v0.10.0 was December 2016

The Road Forward
• Relay Modern

• Apollo

Relay Classic
• React Router v3

• React Router Relay

• Isomorphic Relay Router

• custom Network Layer

<Route component={App}>
<Route path="/:id" component={Story} queries={{
story: () => Relay.QL`query { article(id: $id) }`,
}} />
<Route path="/" component={Home} queries={{
home: () => Relay.QL`query { home }`,
}} />
</Route>

export default Relay.createContainer(CardMedia, {
initialVariables: {
crop: 'jumbo',
},
fragments: {
media: ({ crop }) => Relay.QL`
fragment CardMedia_media on Media {
${Image.getFragment('media', { crop })}
}
`,
},
});

export default Relay.createContainer(Image, {
initialVariables: {
crop: 'jumbo',
},
fragments: {
media: () => Relay.QL`
fragment Image_media on Image {
crops(renditionNames: $crop) {
renditions {
name
url
width
height
}
}
}
`,
},
});

this.props.relay.setVariables({ isClient: true });
fragment Component_data on Data {
data
userData @include(if: $isClient)
}
this.props.relay.setVariables({ count: count + 10 });

export default class RemoveFromReadingListMutation extends Relay.Mutation {
getMutation = () => Relay.QL`mutation { removeFromReadingList }`;
getVariables = () => ({
clientMutationId: this.props.id,
url: this.props.url,
userIdentifier: { token },
});
getFatQuery = () =>
Relay.QL`
fragment on ReadingListMutationResult {
readingListAssetsConnection(first: 200) {
edges
}
}
`;
getConfigs = () => [{
type: 'NODE_DELETE',
parentName: 'readingListAssetsConnection',
connectionName: 'readingListAssetsConnection',
deletedIDFieldName: 'clientMutationId',
}];
}

import { match } from 'react-router';
import IsomorphicRouter from 'isomorphic-relay-router';
import NYTNetworkLayer from 'network/NYTNetworkLayer';
export default async (req, res, next) => {
match({ routes, location: req.url }, (err, redirectLocation,
rootContainerProps) => {
const data = await IsomorphicRouter.prepareData(
rootContainerProps,
new NYTNetworkLayer(req.gqlUrl, req.gqlConfig)
);

const html = renderToString(
<App>
{IsomorphicRouter.render(data.props)}
</App>
);

...
});
};

Relay Modern
• Found Relay - 0.3.0-alpha.9

• <QueryRenderer /> is not
isomorphic

• custom fetch( ) +
QueryResponseCache

export const routeConfig = makeRouteConfig(
<Route
path="/"
Component={App}
query={AppQuery}>
<Route
Component={Home}
query={HomeQuery}
render={renderProp}
/>
</Route>
);

const source = new RecordSource();
const store = new Store(source);
const network = Network.create(fetchQuery);
const environment = new Environment({
network,
store,
});
export default environment;

export default createFragmentContainer(CardMedia, {
media: graphql`
fragment CardMedia_media on Media {
...Image_media
}
`,
});

import { graphql } from 'react-relay';
export default graphql`
query Story_Query($id: ID!, $crop: [CropName!]!) {
...Story_viewer
}
`;

createRefetchContainer(Component, graphql`…`);
this.props.relay.refetch({ searchTerm: 'tacos' });

export default createPaginationContainer(
Term,
graphql`
fragment Term_viewer on Viewer {
term(slug: $slug, taxonomy: $taxonomy) {
id
name
slug
}
posts(term: $slug, after: $cursor, first: $count) @connection(key: "Term_posts") {
edges {
node {
...Post_post
}
cursor
}
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
}
}
`,
{
direction: 'forward',
getConnectionFromProps(props) {
return props.viewer && props.viewer.posts;
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
...fragmentVariables,
count,
cursor,
};
},
getFragmentVariables(vars, totalCount) {
return {
...vars,
count: totalCount,
};
},
query: TermQuery,
}
);

Apollo
• use any Router you want

• no need to customize network

• SSR/Store rehydration requires
very little setup

export default (
<Route path="/" component={App}>
<Route path="/:id" component={Story} />
<Route component={Home} />
</Route>
);

const client = new ApolloClient({
initialState: window.__APOLLO_STATE__,
networkInterface: networkInterface('/graphql'),
fragmentMatcher,
});
ReactDOM.hydrate(
<App />,
document.getElementById('main')
);

@graphql(HomeQuery, {
options: {
variables: {
crop: 'jumbo',
},
},
})
export default class Home extends Component {
render() {
const { data: { loading, error } } = this.props;
if (error) {
return <Error />;
} else if (loading) {
return <Loading />;
}
const { viewer } = this.props.data;
. . .
}
}

@graphql(HomeQuery, {
options: {
ssr: false,
},
})
export default class Home extends Component {
...
}

Apollo Options
• import { gql } from 'react-apollo'
• import gql from 'graphql-tag'
• .graphql ﬁles

• babel-plugin-inline-import-graphql-ast
• graphql-tag/loader

export default function Media() {
. . .
}
Media.fragments = {
node: gql`
fragment Media_node on Media {
id
url
}
`,
};

export default function Media() {
. . .
}
Media.fragments = {
node: gql`
fragment Media_node on Media {
id
url
... on Image {
...Image_node
}
}
${Image.fragments.node}
`,
};

#import "./Archive_posts.graphql"
query Term_Query(
$slug: String!,
$cursor: String,
$count: Int
) {
viewer {
term(slug: $slug) {
id
name
slug
}
posts(term: $slug, after: $cursor, first: $count) {
...Archive_posts
}
}
}

this.props.data.refetch({ … })
this.props.data.fetchMore({ … })

The Problem with
HTML in React
and GraphQL

Structured Data
• Union types: BlockUnion and InlineUnion

• fragments and queries can become enormous when
using heterogenous types

• recursion of unknown/inﬁnite depth is a problem in
GraphQL

Scripts in HTML
• JavaScript will not execute when simply: 
 
<div dangerouslySetInnerHTML={{ __html: content }} />

• Scripts need to be parsed out of content and intialized/re-
initialized on: componentDidMount / componentDidUpdate

• Server-rendering scripts - nodes get blown away on  
 
ReactDOM.{render,hydrate}

Roadmap
• Moving to React 16, adjusting to the ecosystem

• Continue following developments with Relay/Apollo

• Continue evolving our schema

• CSS-in-JS (!!!), Emotion and friends

We're Hiring!
•All jobs:  
https://nytimes.wd5.myworkdayjobs.com/NYT/
•Home team:  
https://nytimes.wd5.myworkdayjobs.com/NYT/job/New-York-NY/
Engineer---News-Products_REQ-001556-2
•Story team:  
https://nytimes.wd5.myworkdayjobs.com/en-US/Tech/job/New-York-NY/
Engineer---News-Products_REQ-001556
•Data team (come talk to us!): GraphQL, Scala, Finagle

The New York Times: Moving to GraphQL

Recommandé

Recommandé

Contenu connexe

Similaire à The New York Times: Moving to GraphQL

Similaire à The New York Times: Moving to GraphQL (20)

Plus de Scott Taylor

Plus de Scott Taylor (11)

Dernier

Dernier (20)

The New York Times: Moving to GraphQL