Issue refetching data

[kcsujeet]

I am using useQuery hook to fetch a list of users as:

  const { data, isLoading, isError, refetch, fetchStatus } = useQuery({
    queryKey: ['users', queryParams],
    queryFn: () => users.getAll(queryParams),
    enabled: Boolean(queryParams),
    onSuccess: (data) => {
      console.log('fetch-users-success', data)
    }
  })

Whenever i create/update/delete users, i use refetch method to get the latest data. However, refetch doesn't seem to be working for some reason. The api call is definitely made (can see the api call in network tab) but for some reason, the fetchStatus is always stuck in fetching after the refetch() method call.

This only happens after refetch method call. What am i doing wrong?

[Lisba]

Hi @kcsujeet!

To get the fresh data after a mutation (create/update/delete), it is recommended to use query invalidations, this way you'd have a more declarative control over when it's needed to refetch data already stale because you just modified it.

The query invalidations api supports partial query matching, so you can match multiple queries by their prefix, or get really specific and match an exact query with the exact: true option, but If you find yourself looking for even more granularity, you can use a predicate function where you could specify custom or more complex rules for invalidate queries.

On the other hand, keep in mind that the onSuccess, onError and onSettled callbacks are deprecated on the v4 and removed on v5 so avoid using them 😉

[kcsujeet]

if i rename include to included, it seems to work for some reason.

[kcsujeet]

update:

seems the issue lies somewhere in the data deserializer. We have an axios interceptor defined as:

api.interceptors.response.use(
  function (response) {
    try {
      const dataFormatter = new Jsona()

      response.data.normalizedData = dataFormatter.deserialize(response.data)
    } catch (err) {
      console.error(err)
    }

    return response
  },
  function (error) {
    return Promise.reject(error)
  }
)

the included data is deserialized in this interceptor. could this be a race condition bug? ...

[kcsujeet]

@Lisba @TkDodo i was finally able to replicate the issue. definitely something to do with the deserialization using Jsona. Here's the link to sandbox.

As you can see in the screenshot above, the fetchStatus is stuck in fetching. I'd appreciate any help in this regards.

Here's the Jsona documentation link.

[TkDodo]

your normalized data circularly references itself via organization, owner and user. Our structuralSharing never finishes. Fix this or set structuralSharing: false (but you'll get more re-renders without it).

[kcsujeet]

@TkDodo ... does that mean react query is incompatible with data which is in json-api format? because this could commonly happen in that format. an entity can have some other entity which in turn can belong to the previous entity ... any workarounds you would suggest?

[TkDodo]

any workarounds

structuralSharing: false

[kcsujeet]

thank you @TkDodo ... i appreciate all your responses. Really one of the most responsive maintainers in any lib I've used.

I was able to solve the issue without disabling the structuralSharing. Just had to modify the behavior of the deserializer i'm using. For anyone interested, here's what i did.