Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-query cache data changed and re-render the app

I have data stored in a single folder. However, I wish to handle them separately within React Query. Furthermore, whenever there’s a change in the cached data, I want it to trigger a corresponding update in the component’s state, leading to a re-render of the application.

const { data: { bookmark: bookMark, reading: bookRead } = {}, error, isLoading } = useQuery({
        queryKey: ['userData', userUID],
        queryFn: getUserData,
        staleTime: Infinity,
        enabled: !!userUID,
        onSuccess: (data) => {
            queryClient.setQueryData('bookmark', data.bookmark)
            queryClient.setQueryData('bookread', data.reading)
        },
    })

Currently start learning react-query from few days.
Any extra knowledge and functionality is highly acceptable and thanks in advance.

I want that when i manually changes cache data with queryClient.setQueryData it wil update the data state of react-query and make a re-render in the app.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found a solution but I don't know it's a good way or not

    const { error, isLoading } = useQuery({
       queryKey: ['userData', userUID],
       queryFn: getUserData,
       staleTime: Infinity,
       enabled: !!userUID,
       onSuccess: (data) => {
           queryClient.setQueryData(['bookMark', userUID], data.bookMark)
           queryClient.setQueryData(['bookRead', userUID], data.bookRead)
       }
   })
   const { data: bookMark } = useQuery(['bookMark', userUID], {
       queryFn: () => queryClient.getQueryData(['bookMark', userUID]),
       enabled: false,
   });
   const { data: bookRead } = useQuery(['bookRead', userUID], {
       queryFn: () => queryClient.getQueryData(['bookRead', userUID]),
       enabled: false,
   });

  2. 0

    You don’t need to create a separate query if there is no corresponding resource to cache. You can always just call useQuery again of the userData and then just use the bookMark or bookRead property of it. You can also compose hooks and use the select option:

    const useUserData = (userUID, select) => useQuery({
  queryKey: ['userData', userUID],
  queryFn: getUserData,
  staleTime: Infinity,
  enabled: !!userUID
})

const useBookMark = (userUUID) => useUserData(userUUID, data => data.bookMark)

const useBookRead = (userUUID) => useUserData(userUUID, data => data.useBookRead)

    To address one of the comments:

    You can directly access the data using const bookMark = queryClient.getQueryData([‘bookMark’, userUID]) instead creating addition useQuery

    This is wrong advice. Calling queryClient.getQueryData isn’t reactive, so your component will not re-render on its own if data in the cache changes. To get reactivity, you need the useQuery hook, because that’s what creates an observer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search