The component is not updating, based on changing in QueryClient.getQueryState()

[skorphil]

Hi, i have component, which needs to be rendered, based on status of query. However it is not updating with query state.

function RecordFormProvider ({children}) => {
  const state = AppQueryClient.getQueryState(['latestRecord']) // I want to render loading state based on this query state

  if (state.status !== 'success') { // Component stack on loading state, even after status becomes success
    return ('LOADING...')
  }

  return (
    {children}
  )
}

Any way to fix this? What is the common pattern for this case?

[TkDodo]

because only observers (created by hooks) actually create subscriptions. queryClient.getQueryState is just a function call - your component can't magically re-render when the status changes because of it.

Not sure what you're trying to do but I'm pretty sure the answer is that you need to use useQuery.

[skorphil]

Thank you! @TkDodo
Well, i'm using useQuery() in outer component(provider). And i want my inner components to react on the state of that query(draw gui depending on the state). Probably this will work if i will pass state as a prop to children components, but i want to avoid prop drilling

[TkDodo]

what's the issue with just calling useQuery in the inner component ?

[skorphil]

@TkDodo The main reason is i want to simplify my form components, placing as much logic as possible in Provider.
Also there is a chance that I will have deeper nested components, which will need to be rendered based on this query state.

For now I have a convenient approach when my Provider contains all custom form methods (like updating specific values, restoring values etc) and logic for setting initial form state etc. And my form nested components like repeaters, tabs etc are "stupid" and just access methods from Provider via useForm context. And access some other states from react Query

[TkDodo]

https://tkdodo.eu/blog/react-query-and-react-context

[skorphil]

@TkDodo thank you. Got it, need to use context API which I hoped I could replace with tanstack to simplify things