1
votes

I'm using Next.js with apollo client. I need to create a seamless workflow between server and client side. In my ssr page, I run a query in getServerSideProps and send the created apollo cache to browser like below;

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: CitiesQuery,
    variables: {
      name: cityParamVar(),
    },
  });

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
  };
}

On the client side, I have my apollo cache already filled with query data, wonderful!. Then, I run a second query on client side, so apollo cache will have my second query results as well. Then, I navigate to Home page and then come back to my page again. Of course getServerSideProps will run again. Here, in getServerSideProps function, is it possible to obtain the same apollo cached filled with my second query results, that was run on client side?

Can we create a totally seamless workflow between client & server?

I saw samples just run const apolloClient = initializeApollo() in getServerSideProps. So, I won't have the updated cache! Am I missing something?