state management
Hi, I have a question about getQueryState
Here is my query, its on query.tsx
const itemsQuery = useQuery({
queryKey: ["getAllEvents"],
queryFn: async () => {
const InitEvents = await getAllEvents();
InitEvents.forEach((event) => {
// {name: 'my event', id: 1, date: Friday ....}
queryClient.setQueryData(["InitEvents", "detail", event.id], event);
});
return InitEvents;
},
});
in a component page, lets call it eventDetails.tsx I have the following
const queryClient = useQueryClient();
const state = queryClient.getQueryState(["getAllEvents"]);
console.log(state && state.data[[
now, it works well when I come from the page that loads that query, but on the component page, if I refresh or navigate directly, the data is undefined.
is there a better way to make "global state" available (this state does change and update, so its semi-persistant if thats a thing)
I'm trying to avoid making an API call every time
I only started using react-query today, so bare with me
Here is my query, its on query.tsx
const itemsQuery = useQuery({
queryKey: ["getAllEvents"],
queryFn: async () => {
const InitEvents = await getAllEvents();
InitEvents.forEach((event) => {
// {name: 'my event', id: 1, date: Friday ....}
queryClient.setQueryData(["InitEvents", "detail", event.id], event);
});
return InitEvents;
},
});
in a component page, lets call it eventDetails.tsx I have the following
const queryClient = useQueryClient();
const state = queryClient.getQueryState(["getAllEvents"]);
console.log(state && state.data[[
${eventId}]]);now, it works well when I come from the page that loads that query, but on the component page, if I refresh or navigate directly, the data is undefined.
is there a better way to make "global state" available (this state does change and update, so its semi-persistant if thats a thing)
I'm trying to avoid making an API call every time
I only started using react-query today, so bare with me
