Updated cache fetched in a different component without making another network request

[azizsaad]

In Component A, I fetch and mutate a garage location:

const postLocationMutation = useMutation({
    mutationFn: async (garageLocation: string) => {
      return await postGarageLocation({ garageLocation })
    },
    onSuccess: (data: any) => {
      queryClient.setQueryData(["garage"], data.data.garageLocation)
    },
  })

Then, in Component B, I grab the garageLocation like so:

const { data: cachedGarageLocation } = useQuery<string>(["garage"])

  const [garageLocation, setGarageLocation] = useState(cachedGarageLocation)

  useEffect(() => {
    setGarageLocation(cachedGarageLocation)
  }, [cachedGarageLocation])

But, when I update the garageLocation in A, it does not re-fetch in B, despite updating the cached value onSuccess.

I know how to solve this with a useEffect as shown above.

I tried this and it does not work (since the cached value never updates):

const queryClient = useQueryClient()
const cachedGarageLocation: string = queryClient.getQueryData(["garage"])

Is there a better way to do this in tanstack without making another network request?

[azizsaad]

Note: if I understand correctly, there is a direct event which means I need to updated the value shown in B, it means I shouldn't use a useEffect, hence my aversion to using it and curiosity towards finding a better way of doing this 😅

[TkDodo]

you'd need to show a reproduction please. calling useQuery with the correct string should be enough (given that you use the same queryClient and that it's stable, see: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable) - the useEffect is an anti-pattern and shouldn't be needed

[azizsaad]

Hey!

Thank you for the useful information.

You were correct - my code was working fine after assigning the query client to React.useState.

Moreover, in my component, I was assigning the fetched data to state. But because the fetched data is undefined first, my useState in Component B was undefined too.

So instead of this:

const { data: cachedGarageLocation } = useQuery<string>(["garage"])

  const [garageLocation, setGarageLocation] = useState(cachedGarageLocation)

  useEffect(() => {
    setGarageLocation(cachedGarageLocation)
  }, [cachedGarageLocation])
  

I'm doing this:

const [garageLocation, onChangeGarageLocation] = useState("")

const { data: cachedGarageLocation } = useQuery({
  queryKey: ["garage"],
  queryFn: () => getGarageLocation({ idToken }),
  onSuccess: (data) => {
       onChangeGarageLocation(data)
     },
  })

I guess this is ok?

[TkDodo]

I guess this is ok?

no, not really. FYI, the callbacks will be removed in the next major version. Copying data from react-query to local state is likely an anti-pattern. Please see: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

[azizsaad]

Right I see. Will give that a proper read. Thanks 👍