apollo-client-cache-rehydration-in-next-js's Introduction

Apollo Client Cache Rehydration in Next.js

Next.js app code for this blog post: https://developers.wpengine.com/blog/apollo-client-cache-rehydration-in-next-js/

This repo demonstrates how to:

Fetch data on the server using server-side rendering (SSR), static site generation (SSG) or incremental static regeneration (ISR) and populate Apollo Client's cache
Send that cache data to the client
Use it to "rehydrate", or initialize, Apollo Client's cache in the browser

This way, you get the benefits of SSR/SSG/ISR (a fully rendered HTML document on the initial page load, great SEO, etc.), and still have the data in Apollo Client's cache. This prevents your app from making unnecessary client-side network requests for data you already have.

apollo-client-cache-rehydration-in-next-js's People

Contributors

Stargazers

Watchers

apollo-client-cache-rehydration-in-next-js's Issues

getStaticPaths Implementation on Dynamic Paths ?

Hello @kellenmace this repository is very helpful, I have successfully implemented Apollo cache on my getStaticProps, but in some Dynamic pages (e.g. [slug].tsx, [...slugs].tsx) where in addition to getStaticProps we need to implement getStaticPaths as well. So the question is how to implement getStaticPaths using this Apollo lib. Here is my current getStaticPaths:

export const getStaticPaths: GetStaticPaths = async ( _ ) => {

  const apolloClient = new ApolloClient({
     uri: process.env.GQL_ENDPOINT,
     cache: new InMemoryCache()
   })

  const {  data: { categories }  } = await apolloClient.query({
    query: GET_CATEGORY_PATHS
  })

  const paths = categories.map( (category: TCategory) => ({
    params: {
      categorySlug: category.slug
    }
  }))

  return {
    paths,
    fallback: true
  }
}

Thx. 👍

--
Best regards
Valdenio Marinho

Recommend Projects

kellenmace / apollo-client-cache-rehydration-in-next-js Goto Github PK

apollo-client-cache-rehydration-in-next-js's Introduction

Apollo Client Cache Rehydration in Next.js

apollo-client-cache-rehydration-in-next-js's People

Contributors

Stargazers

Watchers

Forkers

apollo-client-cache-rehydration-in-next-js's Issues

getStaticPaths Implementation on Dynamic Paths ?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent