I’m currently working on a personal sports tracking project using React Native and GraphQL, and I’m wondering about the use of Apollo Client in combination with Zustand.
Apollo Client handles data fetching and server-side caching, but it feels like I’m duplicating my data by also storing it in my Zustand client-side store. This raises the question: is Zustand truly useful when used alongside Apollo Client? Additionally, I’m trying to understand the benefits of having both server-side and client-side state management. Given that the server cache is accessible throughout my application, I’m struggling to see the value in combining the two.
I’d appreciate your insights and explanations on this !
Thank you in advance ! 😉
This is my code :
const Exercices = () => {
const { token } = useAuthStore();
const { exercices, setExercices } = useExerciceStore();
const { data, loading, error } = useQuery(GET_EXERCICES, {
context: {
headers: {
Authorization: `Bearer ${token}`,
},
},
});
useEffect(() => {
if (data) {
setExercices(data);
}
}, [data]);
if (loading) {
return <Text>Loading...</Text>;
}
if (error) {
return <Text>Error</Text>;
}
I get exercices and setExercices store client.
“Client side data” here means “data that is not server-side”.
Don’t store data from the server in Zustand. You might not have any data left beyond that, and then you don’t have a need for Zustand. Or you have data, for example a user preference for dark mode over light mode that is not stored on the server, then you might have a reason for client-side state mgmt.
Use it when you actually need it, not “for something, out of principle”.