Revalidate The Data on Route change on react client for Next js

[naimulemon]

There are no existing feature requests related to revalidating data on route change in a React client for Next.js in the apollographql/apollo-client repository. I will now create a new issue for this feature request.

---

Feature Request: Revalidate Data on Route Change in React Client for Next.js

Description:
We would like to request a feature for revalidating data on route change in a React client when using Next.js. This feature would ensure that the data stays fresh and up-to-date as users navigate through different routes in a Next.js application.

Use Case:
When developing applications with Next.js and Apollo Client, it is essential to ensure that the data rendered on different pages is always up-to-date. Currently, developers need to manually handle data revalidation on route changes, which can be cumbersome and error-prone. Automating this process would greatly enhance the developer experience and ensure data consistency across the application.

Proposed Solution:
Implement a mechanism within Apollo Client that triggers data revalidation whenever a route change is detected in a Next.js application. This could be achieved by:

• Listening to Next.js route change events.
• Triggering a refetch of relevant queries when a route change occurs.
• Providing configuration options to customize the revalidation behavior (e.g., specifying which queries to refetch).

Benefits:

• Improved data consistency across different routes in a Next.js application.
• Reduced complexity for developers by automating the data revalidation process.
• Enhanced user experience with up-to-date data displayed on all pages.

Additional Context:
This feature would be particularly useful for applications that rely heavily on dynamic data and require real-time updates as users navigate through different pages.

---

I will now proceed to create this issue in the apollographql/apollo-client repository.

[phryneas]

Hi @naimulemon :)

Generally, Apollo Client doesn't include any tools that can only be used with only a single framework, with the exception of our @apollo/experimental-nextjs-app-support package, which is currently needed because React has no native way of supporting streaming SSR, so we have to rely on framework internals to make this work.

This feature request sounds like something that would need to be implemented in userland, but even there I see a few problems, since the Next.js App router does not have navigation events and there is no generally reliable way of telling which data will be consumed by a specific route unless you use fragment composition.

If you are using the App Router, my recommendation would be to use fragment composition in combination with preloading data in RSC for usage in Client Components, which will make sure that your data is always up-to-date on page navigation.