Apollo Client version 3 cache update delay

[sepehrrtl]

The React application that I have is using location.pathname to send a request to my graphql endpoint using useQuery It means whenever I change the route, it sends a request to server to receive the new data. The issue I have is while it's in loading state I would like to keep current data so it should act kind of like Youtube when you click on a video. There should be a progress bar on top of the page and when the data is received, then I will display the fresh new data.

But after migrating from version 2 to version 3 I lost this feature. Now it redirects to new page without data and after a few sec when the data is received, it displays the new data.

How can I keep current cache state while I'm sending a request to server?

BTW I have also SSR.

Below is my setup:

server.ts

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  ssrMode: true,
  link: from([errorLink, httpLink]),
  cache,
  typeDefs,
  ssrForceFetchDelay: 100,
});

client

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: cache.restore(apolloState || {}),
  typeDefs,
});

const usePage = <T = Record<'page', Page>>(options?: Options): QueryResult<T> => {
  const { pathname } = useLocation();

  return useQuery<T>(getQuery(options?.fragmentName, options?.fragment), {
    variables: {
      pathname: options?.pathname || pathname,
    },
    ...(options?.queryOptions || {}),
    errorPolicy: 'all',
  });
};

App

const App = () => {
  const content = usePage();

  if (content.loading) {
      return <ProgressBar />;
  }

  if (!content) {
      return <NoContent action={pageContent.refetch} />;
  }

  return <Page data={content.data} />
}

[gaurabsarkar]

Does this help? https://www.apollographql.com/docs/react/data/queries/#cache-and-network

[sepehrrtl]

I found the answer here