1+ /*
2+ Apollo Client is a complete state management library for JavaScript apps. Simply write a GraphQL query,
3+ and Apollo Client will take care of requesting and caching your data, as well as updating your UI.
4+
5+ Fetching data with Apollo Client guides you to structure your code in a predictable,
6+ declarative way consistent with modern React best practices.
7+ */
8+ import { ApolloClient } from 'apollo-client' ;
9+ 10+ /*
11+ Apollo Client uses a normalized, in-memory cache to dramatically speed up the execution of queries that don't rely on real-time data.
12+ */
13+ import { InMemoryCache } from 'apollo-cache-inmemory' ;
14+ 15+ /* Apollo HOC for Next.js. */
16+ import withApollo from 'next-with-apollo' ;
17+ 18+ /*
19+ Get GraphQL results over a network using HTTP fetch.
20+ The http link is a terminating link that fetches GraphQL results from a GraphQL endpoint over an http connection.
21+ */
22+ import { createHttpLink } from 'apollo-link-http' ;
23+ 24+ /*
25+ "isomorphic unfetch" make us use "fetch" in both node and client, as the name isomorphic says that.
26+ */
27+ import fetch from 'isomorphic-unfetch' ;
28+ 29+ 30+ const GRAPHQL_URL = 'https://api.graphql.jobs/' ;
31+ 32+ const link = createHttpLink ( {
33+ fetch, // Switches between unfetch & node-fetch for client & server.
34+ uri : GRAPHQL_URL
35+ } ) ;
36+ 37+ 38+ /*
39+
40+ withApollo accepts a function that receives { ctx, headers } in the first render with SSR (Server Side Rendering).
41+ This is done to fetch your queries and hydrate the store before we send the page to the browser.
42+
43+ withApollo will receive { initialState } if the render is happening in the browser,
44+ with the following line we're hydrating our cache with the initial state created in the server.
45+ */
46+ 47+ 48+ export default withApollo (
49+ // You can get headers and ctx (context) from the callback params
50+ // e.g. ({ headers, ctx, initialState })
51+ ( { initialState } ) =>
52+ new ApolloClient ( {
53+ link : link ,
54+ cache : new InMemoryCache ( )
55+ // rehydrate the cache using the initial data passed from the server:
56+ . restore ( initialState || { } )
57+ } )
58+ ) ;
0 commit comments