GraphQL at The New York Times

Talk given at GraphQL NYC on October 4th, 2017

Transcript

1. GraphQL at The New York Times Jeremy Gayed @tizmagik GraphQL NYC Oct 4th, 2017
2. Replatform “Vi” • SSR • Client-only queries • Lazy queries • Code-splitting
3. } SSR CSR {
5. Relay Classic
6. The Good You be you, Relay • Co-located queries • Variables on fragments • From Facebook
7. The Bad Room for improvement • No SSR • Leaking complexity to routing layer • Multiple “root” queries • Wasted User query on the server
8. Apollo Ooo, shiny • SSR • Routing agnostic • Co-located fragments • Great DX
9. Relay Modern One dot uh-oh
10. Routing Static Routes • react-router v3 • isomorphic-relay • isomorphic-relay-router Static Routes • found • found-relay Routing Agnostic Relay Classic Relay Modern Apollo
11. Network Interface Relay.DefaultNetworkLayer • fetchWithRetries • Error handling • Error reporting • Trace requests NYTNetworkLayer • Extends DefaultNetworkLayer • Pair with isomorphic-relay Relay Environment • Store(source) • Network(operations, variables) • Pair with found-relay ApolloClient • Similar interface for server/client • fragmentMatcher needed for Union and Interface types Relay Classic Relay Modern Apollo
12. Fragments • Dynamic • String interpolation • Variables ◦ prepareParams ◦ initialVariables • Anonymous fragments fragments: { media: ({ crop }) => Relay.QL` ... ` } • Static • Fragments must be named • Spread fragments not in scope • Build-time analyzation ◦ babel-plugin-relay • Static • Fragments must be named • Fragments defined statically on components • “Import” fragments • Build-time optimization ◦ Webpack plugin/loader ◦ Or, babel plugins Relay Classic Relay Modern Apollo graphql` fragment Image_media on Media { crops(crops: ["jumbo","wide"]){ ... } } `
15. Queries • Root queries on routes • Data Masking • Variables don’t need to be on root queries • Root queries on routes ◦ QueryRenderer anywhere • Data Masking • Variables must be on root queries • Root queries anywhere • No Data Masking • Variables must be on root queries Relay Classic Relay Modern Apollo
16. Refetching this.props.relay.setVariables({...}) Relay Classic Relay Modern Apollo Relay.createRefetchContainer(comp, fragment, query) this.props.relay.refetch({...}) (Can use experimental @argumentsDefinitions / @arguments directives) this.props.data.refetch({...})
17. So? Participation award goes to...
18. Apollo 2.0 First-class SSR Routing agnostic ⚠ Loading/Error state in components DX Performance Observables (drops Redux) Apollo-Link Schema stitching Persisted queries Fetch policies
19. Learn More • Relay Classic/Modern cheat sheet: https://facebook.github.io/relay/docs/api-cheatsheet.html • A Look at Apollo from a Relay (Classic) Perspective: https://jeremygayed.com/a-look-at-apollo-from-a-relay-perspective-1c2d43b0a 37a • Upgrading to Relay Modern or Apollo, by Scott Taylor @wonderboymusic: https://medium.com/@wonderboymusic/upgrading-to-relay-modern-or-apollo -ffa58d3a5d59
20. Jeremy Gayed @tizmagik Thank You