apollographql / apollographql/apollo-client-integrations
Cache in ssr component and client component
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
Hi, we recently started implementing your package in our Next.js application.
There are a few issues we are facing:
In the server components, we send a query like this
```
const data = await client.query({
query: MY_PROJECTS,
});
```
Is it possible to clear the cache specifically for this query?
And how to clear the whole cache?
2. If we use the Apollo Wapper, which was created on the basis of this code
```
function makeClient() {
const httpLink = new HttpLink({
uri: "https://example.com/api/graphql",
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: httpLink,
});
}
export function ApolloWrapper({ children }: React.PropsWithChildren) {
return (
{children}
);
```
Then we have a problem with caching requests. When we reload the page, the cache is completely cleared and `NextSSRInMemoryСache()` works like in `InMemoryCache()`
We tried to use the experimental hooks `useQuery`, `useSuspenseQuery`. but the problem is that using them, we also fail to fully cache queries.
How can we fix this problem?
Thanks in advance. I would appreciate your help
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the makeClient function, ApolloNextAppProvider, NextSSRInMemoryCache, and the experimental useQuery/useSuspenseQuery usage shown in the report. Reproduce the cache behavior across server and client components, then document or verify a way to clear a query or the whole cache and preserve expected caching after a reload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, next.js, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100