search

apollographql / apollo-client-nextjs

Apollo Client support for the Next.js App Router
https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support
MIT License
358 stars 25 forks source link

Mutation patterns and invalidating the cache? #46

Closed JohnMarsden24 closed 2 months ago

JohnMarsden24 commented 10 months ago

Hey there! We're experimenting with the new app directory and RSC coming previously from using /pages and the Apollo client. One pattern I've yet to see in full detail, and this is not only in regards to this package but the app directory in general, is how to do mutations and invalidate the cache / re-trigger server components. We work on dynamic user features so refetching data when they change something in their profile is crucial to us. Is there yet a pattern on how best to handle this?

phryneas commented 10 months ago

If you have data that can change during usage of your application, my general recommendation would be to keep that in client components - it will save you from a lot of server roundtrips.

Generally, we recommend to show "static" data in server components, and to show "dynamic" data in client components. The most important part is to separate your data in "RSC" and "CC" and never show the same data in both of them.

If you want to keep that data in server components, there isn't really a way around fully rerendering the whole RSC part of the page - calling router.refresh() (with const router = useRouter()) after your mutation finished.

bidhan690 commented 10 months ago

man how to use mutation using this package?

phryneas commented 10 months ago

@bidhan690 I believe I described that in this comment. Could you specify your question? What information are you missing?

anna-colenso commented 10 months ago

@phryneas thanks for all the work you are doing for this package! My question is related to mutations, so shooting it here - is it ok to use useMutation hook from @apollo/client in CC alongside using useQuery from @apollo/experimental-nextjs-app-support/rsc?

phryneas commented 10 months ago

@anna-colenso Yes, perfectly fine! We didn't re-export useMutation from this package because it would just be the unchanged @apollo/client hook. You're fine using that one!

lei0gre commented 9 months ago

Thanks for the anwser @phryneas

guillaumetran commented 8 months ago

@anna-colenso Yes, perfectly fine! We didn't re-export useMutation from this package because it would just be the unchanged @apollo/client hook. You're fine using that one!

It seems like the refetchQueries in the useMutation hooks is not compatible with useQuery from @apollo/experimental-nextjs-app-support/rsc. Can you confirm?

phryneas commented 8 months ago

@guillaumetran That should not be the case useQuery from this package really just calls useQuery from @apollo/client with a few wrappers around. Can you please explain what you are seeing - preferrably in a separate ticket?

guillaumetran commented 8 months ago

@guillaumetran That should not be the case useQuery from this package really just calls useQuery from @apollo/client with a few wrappers around. Can you please explain what you are seeing - preferrably in a separate ticket?

Thanks, I opened a ticket if anyone wants to follow : #92

phryneas commented 2 months ago

I'm doing some housekeeping so I'm closing some older issues that haven't seen activity in a while. If this is still relevant, please feel free to reopen the issue.

github-actions[bot] commented 2 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.