{"id":197,"date":"2021-05-26T15:42:40","date_gmt":"2021-05-26T21:42:40","guid":{"rendered":"https:\/\/developers.wpengine.com\/blog\/?p=197"},"modified":"2023-04-19T08:53:49","modified_gmt":"2023-04-19T14:53:49","slug":"apollo-client-cache-rehydration-in-next-js","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/","title":{"rendered":"Apollo Client Cache Rehydration in Next.js"},"content":{"rendered":"\n

Apollo Client<\/a> is a popular GraphQL client that can cache the results of your queries, among many other features. If you have an entirely client-side rendered (CSR) front-end app and want to do all your data fetching in the browser, you can simply start off with an empty Apollo Client cache and populate it with data as GraphQL requests execute.<\/p>\n\n\n\n

But what if you want to use server-side rendering (SSR), static site generation (SSG), or incremental static regeneration (ISR), though? How can you fetch data ahead of time on the server? Can the Apollo Client’s cache initialize with that data on the client so that your queries don’t need to be rerun?<\/p>\n\n\n\n

Thankfully, there is a way to fetch data on the server, populate Apollo Client’s cache, send that cache data to the client, and use it to “rehydrate” or initialize Apollo Client’s cache in the browser. Cache rehydration gives the benefits of SSR\/SSG\/ISR (a fully rendered HTML document on the initial page load, great SEO, etc.). Best of all, you still have the data in Apollo Client’s cache. This prevents your app from making unnecessary network requests for data you already have.<\/p>\n\n\n\n

In this blog post, we’ll cover how to set up Apollo Client cache rehydration in a Next.js app.<\/p>\n\n\n\n

Project Setup<\/h2>\n\n\n\n

Before setting up cache rehydration, fulfill the following prerequisites:<\/p>\n\n\n\n

  1. Clone down the repo to your machine: https:\/\/github.com\/kellenmace\/apollo-client-cache-rehydration-in-next-js<\/a><\/li>
  2. Run npm install<\/code> (or yarn<\/code>) to install the project’s dependencies.<\/li>
  3. Create a .env.local<\/code> file in the root directory with this variable defined: NEXT_PUBLIC_WORDPRESS_API_URL=http:\/\/my-local-site.local\/graphql<\/code>. Swap out http:\/\/my-local-site.local<\/code> with the domain of a WordPress site that has WPGraphQL installed.<\/li>
  4. Run npm run dev<\/code> to get the app up and running locally.<\/li><\/ol>\n\n\n\n

    Approach<\/h2>\n\n\n\n

    <\/p>\n\n\n\n

    Server-side Rendering<\/a> (SSR) through the Apollo client follows this approach:<\/p>\n\n\n\n

    1. Use Apollo Client’s getDataFromTree()<\/code> function to get the results for all queries throughout your entire component tree for the current page.<\/li>
    2. Extract Apollo Client’s cache and send that data to the client as a global window.APOLLO_STATE<\/code> object.<\/li>
    3. When Apollo Client initializes on the client, call its new InMemoryCache().restore()<\/code> function, passing in the window.APOLLO_STATE<\/code> object to seed it with the cache data from the server.<\/li><\/ol>\n\n\n\n

      Although using the SSR approach works well with Next.js, the recommended way to do Apollo Client cache rehydration differs from that. We will instead do this:<\/p>\n\n\n\n

      1. Use Next’s getStaticProps()<\/code> or getServerSideProps()<\/code> function to do our data fetching and populate Apollo Client’s cache.<\/li>
      2. Extract Apollo Client’s cache and add it as a pageProps<\/code> prop for the current page.<\/li>
      3. When Apollo Client initializes on the client, call its new InMemoryCache().restore()<\/code> function, passing in the cache data from the server.<\/li><\/ol>\n\n\n\n

        For more information on how the Apollo client works, check out\u00a0this official Next.js example project<\/a>. We’ll use that same approach for our purposes, except the code examples will be written in TypeScript rather than JS, and all the data fetching examples will be specific to WordPress and WPGraphQL.<\/p>\n\n\n\n

        Install & Configure Apollo Client<\/h2>\n\n\n\n

        Per Apollo Client’s getting started documentation<\/a>, the @apollo\/client<\/code> and graphql<\/code> NPM are already installed. The deepmerge<\/code> and lodash<\/code> packages have also been installed, which our project leverages.<\/p>\n\n\n\n

        To start configuring the client, open the lib\/apolloClient.ts<\/code> file in a code editor. It looks like this:<\/p>\n\n\n

        import<\/span> { useMemo } from<\/span> 'react'<\/span>;\n<\/span><\/span>import<\/span> { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from<\/span> '@apollo\/client'<\/span>;\n<\/span><\/span>import<\/span> { relayStylePagination } from<\/span> \"@apollo\/client\/utilities\"<\/span>;\n<\/span><\/span>import<\/span> merge from<\/span> 'deepmerge'<\/span>;\n<\/span><\/span>import<\/span> isEqual from<\/span> 'lodash\/isEqual'<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> const<\/span> APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'<\/span>;\n<\/span><\/span>\n<\/span><\/span>let<\/span> apolloClient: ApolloClient<NormalizedCacheObject> | undefined<\/span>;\n<\/span><\/span>\n<\/span><\/span>function<\/span> createApolloClient<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  return<\/span> new<\/span> ApolloClient({\n<\/span><\/span>    ssrMode<\/span>: typeof<\/span> window<\/span> === 'undefined'<\/span>,\n<\/span><\/span>    link<\/span>: new<\/span> HttpLink({\n<\/span><\/span>      uri<\/span>: process.env.NEXT_PUBLIC_WORDPRESS_API_URL, \/\/ Server URL (must be absolute)<\/span>\n<\/span><\/span>      credentials<\/span>: 'same-origin'<\/span>, \/\/ Additional fetch() options like `credentials` or `headers`<\/span>\n<\/span><\/span>    }),\n<\/span><\/span>    cache<\/span>: new<\/span> InMemoryCache({\n<\/span><\/span>      \/\/ typePolicies is not required to use Apollo with Next.js - only for doing pagination.<\/span>\n<\/span><\/span>      typePolicies<\/span>: {\n<\/span><\/span>        Query<\/span>: {\n<\/span><\/span>          fields<\/span>: {\n<\/span><\/span>            posts<\/span>: relayStylePagination(),\n<\/span><\/span>          },\n<\/span><\/span>        },\n<\/span><\/span>      },\n<\/span><\/span>    }),\n<\/span><\/span>  })\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> function<\/span> initializeApollo<\/span>(initialState: NormalizedCacheObject | null = null<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> _apolloClient = apolloClient ?? createApolloClient();\n<\/span><\/span>\n<\/span><\/span>  \/\/ If your page has Next.js data fetching methods that use Apollo Client, the initial state<\/span>\n<\/span><\/span>  \/\/ gets hydrated here<\/span>\n<\/span><\/span>  if<\/span> (initialState) {\n<\/span><\/span>    \/\/ Get existing cache, loaded during client side data fetching<\/span>\n<\/span><\/span>    const<\/span> existingCache = _apolloClient.extract();\n<\/span><\/span>\n<\/span><\/span>    \/\/ Merge the existing cache into data passed from getStaticProps\/getServerSideProps<\/span>\n<\/span><\/span>    const<\/span> data = merge(initialState, existingCache, {\n<\/span><\/span>      \/\/ combine arrays using object equality (like in sets)<\/span>\n<\/span><\/span>      arrayMerge<\/span>: (destinationArray, sourceArray<\/span>) =><\/span> [\n<\/span><\/span>        ...sourceArray,\n<\/span><\/span>        ...destinationArray.filter((d<\/span>) =><\/span>\n<\/span><\/span>          sourceArray.every((s<\/span>) =><\/span> !isEqual(d, s))\n<\/span><\/span>        ),\n<\/span><\/span>      ],\n<\/span><\/span>    });\n<\/span><\/span>\n<\/span><\/span>    \/\/ Restore the cache with the merged data<\/span>\n<\/span><\/span>    _apolloClient.cache.restore(data);\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>  \/\/ For SSG and SSR always create a new Apollo Client<\/span>\n<\/span><\/span>  if<\/span> (typeof<\/span> window<\/span> === 'undefined'<\/span>) return<\/span> _apolloClient;\n<\/span><\/span>\n<\/span><\/span>  \/\/ Create the Apollo Client once in the client<\/span>\n<\/span><\/span>  if<\/span> (!apolloClient) apolloClient = _apolloClient;\n<\/span><\/span>\n<\/span><\/span>  return<\/span> _apolloClient;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> function<\/span> addApolloState<\/span>(client: ApolloClient<NormalizedCacheObject>, pageProps: any<\/span>) <\/span>{\n<\/span><\/span>  if<\/span> (pageProps?.props) {\n<\/span><\/span>    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>  return<\/span> pageProps;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> function<\/span> useApollo<\/span>(pageProps: any<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> state = pageProps[APOLLO_STATE_PROP_NAME];\n<\/span><\/span>  const<\/span> store = useMemo(()<\/span> =><\/span> initializeApollo(state), [state]);\n<\/span><\/span>  return<\/span> store;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        Let’s walk through each of those function definitions.<\/p>\n\n\n\n
        createApolloClient()<\/h3>\n\n\n\n
        This function is responsible for creating a new instance of Apollo Client.<\/p>\n\n\n\n
        We set Apollo Client’s ssrMode<\/code> option to true<\/code> if the code is running on the server, and to false<\/code> if it’s running on the client.<\/p>\n\n\n\n
        The uri: process.env.NEXT_PUBLIC_WORDPRESS_API_URL<\/code> line tells Apollo Client to use the GraphQL endpoint defined in your .env.local<\/code> file for all network requests.<\/p>\n\n\n\n
        initializeApollo()<\/h3>\n\n\n\n
        As its name suggests, this function initializes Apollo Client. It merges the initial state (data passed in from getStaticProps()<\/code> \/ getServerSideProps()<\/code>) with the existing client-side Apollo cache, then sets that new, merged data set as the new cache for Apollo Client.<\/p>\n\n\n\n
        addApolloState()<\/h3>\n\n\n\n
        This function takes the pageProps<\/code> returned from getStaticProps()<\/code> \/ getServerSideProps()<\/code> for the current page and adds to them Apollo’s cache data. From there, Next.js takes care of passing Apollo’s cache data, along with any other page-specific props into the page component.<\/p>\n\n\n\n
        useApollo()<\/h3>\n\n\n\n
        This function calls initializeApollo()<\/code> to get an instance of Apollo Client that has Apollo’s cache data added to it. This client is ultimately passed in as a prop to the ApolloProvider<\/code> that Apollo Client provides.<\/p>\n\n\n\n
        Render an ApolloProvider<\/h2>\n\n\n\n
        Inside of _app.tsx<\/code>, we call useApollo()<\/code> to get a new instance of Apollo Client, passing to it the pageProps<\/code> for the current page. The  apolloClient<\/code> instance is then passed in as a prop to the ApolloProvider<\/code> component, which wraps our application.<\/p>\n\n\n
        import<\/span> { AppContext, AppInitialProps } from<\/span> \"next\/app\"<\/span>;\n<\/span><\/span>import<\/span> { ApolloProvider } from<\/span> \"@apollo\/client\"<\/span>;\n<\/span><\/span>import<\/span> { useApollo } from<\/span> \"..\/lib\/apolloClient\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>import<\/span> \"..\/styles\/globals.css\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>function<\/span> MyApp<\/span>({ Component, pageProps }: AppContext & AppInitialProps<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> apolloClient = useApollo(pageProps)\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <ApolloProvider<\/span> client<\/span>={apolloClient}<\/span>><\/span><\/span>\n<\/span><\/span>      <Component<\/span> {...pageProps<\/span>} \/><\/span><\/span><\/span>\n<\/span><\/span>    <\/ApolloProvider<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> MyApp;<\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        How to Use in Page Components<\/h2>\n\n\n\n
        Let’s see how we can use this Apollo Client cache rehydration superpower in our Next.js page components.<\/p>\n\n\n\n
        Open up pages\/ssg.tsx<\/code>. A simplified version of that file looks like this:<\/p>\n\n\n
        import<\/span> { gql, useQuery } from<\/span> \"@apollo\/client\"<\/span>;\n<\/span><\/span>import<\/span> { initializeApollo, addApolloState } from<\/span> \"..\/lib\/apolloClient\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> POSTS_PER_PAGE = 10<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> GET_POSTS = gql`<\/span>\n<\/span><\/span>  query getPosts($first: Int!, $after: String) {<\/span>\n<\/span><\/span>    posts(first: $first, after: $after) {<\/span>\n<\/span><\/span>      # etc.<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> function<\/span> SSG<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> { loading, error, data } = useQuery(GET_POSTS, {\n<\/span><\/span>    variables<\/span>: {\n<\/span><\/span>      first<\/span>: POSTS_PER_PAGE,\n<\/span><\/span>      after<\/span>: null<\/span>,\n<\/span><\/span>    }\n<\/span><\/span>  });\n<\/span><\/span>\n<\/span><\/span>  \/\/ etc.<\/span>\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> async<\/span> function<\/span> getStaticProps<\/span>(context: GetStaticPropsContext<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> apolloClient = initializeApollo();\n<\/span><\/span>\n<\/span><\/span>  await<\/span> apolloClient.query({\n<\/span><\/span>    query<\/span>: GET_POSTS,\n<\/span><\/span>    variables<\/span>: {\n<\/span><\/span>      first<\/span>: POSTS_PER_PAGE,\n<\/span><\/span>      after<\/span>: null<\/span>,\n<\/span><\/span>    }\n<\/span><\/span>  });\n<\/span><\/span>\n<\/span><\/span>  return<\/span> addApolloState(apolloClient, {\n<\/span><\/span>    props<\/span>: {},\n<\/span><\/span>  });\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        Inside of Next.js’ getStaticProps()<\/code> function, we call initializeApollo()<\/code> to get an instance of Apollo Client that we can use for making GraphQL requests.<\/p>\n\n\n\n
        We then call the apolloClient.query()<\/code> method, passing in the exact same query and variables that are used inside of our SSG<\/code> page component when it calls the useQuery()<\/code> hook. You’ll notice that we’re not even using the return value that apolloClient.query()<\/code> provides. This is because we don’t need it \u2013 we’re only calling apolloClient.query()<\/code> to populate Apollo Client’s cache with the data for the queries executed.<\/p>\n\n\n\n
        More info on Next.js’ getStaticProps()<\/code> function can be found here: https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getstaticprops-static-generation<\/a>.<\/p>\n\n\n\n
        SSR Page<\/h3>\n\n\n\n
        Open up pages\/ssr.tsx<\/code> and visit http:\/\/localhost:3000\/ssr<\/a>. You can see that this file functions exactly the same as ssg.tsx<\/code>, except that Next.js passes in the page props on every request since we’re using getServerSideProps()<\/code> instead of getStaticProps()<\/code>. Again, you can open up the Network tab in the DevTools and refresh the page to confirm that no client-side GraphQL requests execute.<\/p>\n\n\n\n
        More info on Next.js’ getServerSideProps()<\/code> function can be found here: https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getserversideprops-server-side-rendering<\/a>.<\/p>\n\n\n\n
        CSR Page<\/h3>\n\n\n\n
        To prove that we still have the option to do data fetching on the client, if desired, open up pages\/csr.tsx<\/code> and visit http:\/\/localhost:3000\/csr<\/a>. You can see that this page does not fetch any data on the server, since we’re not using getStaticProps()<\/code> or getServerSideProps()<\/code>. If you open up the Network tab in the DevTools and refresh the page, you can confirm that the GraphQL network requests execute client-side when the page first loads. You can do this if you want your request to run in the browser only, and not on the server.<\/p>\n\n\n\n
        Mixed SSG + CSR Page<\/h3>\n\n\n\n
        Finally, open up pages\/blog.tsx<\/code>. Make sure you have eleven or more posts created in your WordPress backend, then visit http:\/\/localhost:3000\/blog<\/a>.You can see that inside of getStaticProps()<\/code>, an Apollo Client query is executed to get the initial list of ten blog posts, which immediately get rendered to the page when it loads. If more posts exist in the WordPress backend, the user is presented with a Load more<\/code> button. Clicking this button results in Apollo Client’s fetchMore()<\/code> function being called, which fires off a network request to get the next five posts and appends them to the list. Once all posts have been loaded, the user sees an \u2705 All posts loaded<\/code> message.<\/p>\n\n\n\n
        The blog.tsx <\/code>page shows how you can fetch some data on the server to populate Apollo’s cache. Also, the markup appears instantly when the page loads on the front-end. After, the page fires subsequent client-side requests to fetch additional data, adding it to Apollo’s cache..<\/p>\n\n\n\n
        How to Use this Code in Your Projects<\/h2>\n\n\n\n
        In order to use Apollo Client for SSG\/SSR\/ISR in a Next.js project, you’ll need to follow these steps:<\/p>\n\n\n\n
        1. Copy lib\/apolloClient.ts<\/code> into your project.
          As stated above, set the process.env.NEXT_PUBLIC_WORDPRESS_API_URL<\/code> variable to reference the GraphQL endpoint of your headless WordPress backend.
          The object containing typePolicies<\/code> that is being passed into new InMemoryCache()<\/code> in this file can be omitted if you’re not doing any pagination in your project (such as the fetchMore()<\/code> pagination demonstrated on the pages\/blog.tsx<\/code> page).<\/li>
        2. In pages\/_app.tsx<\/code>, call useApollo(pageProps)<\/code> to get an instance of Apollo Client, then pass that in as a prop to the <ApolloProvider \/><\/code> component, as shown above.<\/li>
        3. Mimic the page components in the \/pages directory of this project, depending on whether you want your pages to do their data fetching at build time (see ssg.tsx<\/code>), at request time on the server (see ssr.tsx<\/code>), on the client only (see csr.tsx<\/code>), or a mixture of those (see blog.tsx<\/code>).<\/li><\/ol>\n\n\n\n
          Wrapping Up<\/h2>\n\n\n\n
          I hope this walk-through helps you with leveraging Apollo Client for SSG\/SSR\/ISR data fetching on your next Next.js project.<\/p>\n\n\n\n
          And that’s it! Thanks so much for giving this post a read, and please reach out to us with any questions you have! ????<\/p>\n","protected":false},"excerpt":{"rendered":"
          Apollo Client is a popular GraphQL client that can cache the results of your queries, among many other features. If you have an entirely client-side rendered (CSR) front-end app and want […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"\nApollo Client Cache Rehydration in Next.js - Builders<\/title>\n<meta name=\"description\" content=\".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apollo Client Cache Rehydration in Next.js - Builders\" \/>\n<meta property=\"og:description\" content=\".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-26T21:42:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-19T14:53:49+00:00\" \/>\n<meta name=\"author\" content=\"Kellen Mace\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kellen Mace\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/\"},\"author\":{\"name\":\"Kellen Mace\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/e6e62698d757a8421cc9723ffa8b1be3\"},\"headline\":\"Apollo Client Cache Rehydration in Next.js\",\"datePublished\":\"2021-05-26T21:42:40+00:00\",\"dateModified\":\"2023-04-19T14:53:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/\"},\"wordCount\":1501,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/\",\"name\":\"Apollo Client Cache Rehydration in Next.js - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"datePublished\":\"2021-05-26T21:42:40+00:00\",\"dateModified\":\"2023-04-19T14:53:49+00:00\",\"description\":\".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/apollo-client-cache-rehydration-in-next-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apollo Client Cache Rehydration in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/e6e62698d757a8421cc9723ffa8b1be3\",\"name\":\"Kellen Mace\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g\",\"caption\":\"Kellen Mace\"},\"description\":\"Kellen Mace is the Manager of the Developer Relations team at WP Engine. He likes building modern web apps with SvelteKit, TypeScript, Tailwind, and AI tools.\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/kellen-macewpengine-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apollo Client Cache Rehydration in Next.js - Builders","description":".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Apollo Client Cache Rehydration in Next.js - Builders","og_description":".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.","og_url":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/","og_site_name":"Builders","article_published_time":"2021-05-26T21:42:40+00:00","article_modified_time":"2023-04-19T14:53:49+00:00","author":"Kellen Mace","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Kellen Mace","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/"},"author":{"name":"Kellen Mace","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3"},"headline":"Apollo Client Cache Rehydration in Next.js","datePublished":"2021-05-26T21:42:40+00:00","dateModified":"2023-04-19T14:53:49+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/"},"wordCount":1501,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/","url":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/","name":"Apollo Client Cache Rehydration in Next.js - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"datePublished":"2021-05-26T21:42:40+00:00","dateModified":"2023-04-19T14:53:49+00:00","description":".Learn how to set up Apollo Client cache rehydration in a Next.js app, for better data caching with GraphQL.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/apollo-client-cache-rehydration-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Apollo Client Cache Rehydration in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3","name":"Kellen Mace","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/479f2598f161363ba2e78e1b085782477580ea3d5c4609cc9bce3be4945090d5?s=96&d=mm&r=g","caption":"Kellen Mace"},"description":"Kellen Mace is the Manager of the Developer Relations team at WP Engine. He likes building modern web apps with SvelteKit, TypeScript, Tailwind, and AI tools.","url":"https:\/\/wpengine.com\/builders\/author\/kellen-macewpengine-com\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
        When our SSG<\/code> page component is rendered in the browser and the useQuery()<\/code> hook is called, Apollo Client will “see” that the data for the query being executed already exists it its cache, and will use that data instead of making a network request. This will result in the content on the page rendering immediately.  Visit http:\/\/localhost:3000\/ssg<\/a> in your browser, open up the Network tab in the DevTools and refresh the page to confirm that no client-side GraphQL requests execute.<\/p>\n\n\n\n