apollographql / apollographql/apollo-client-integrations

Cache in ssr component and client component

Open
#192 3 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.