Overriding query config at query level

[niki4810]

Hi @tannerlinsley,

This is more of a question than an issue. I have the following scenario

App.js, provides a queryConfig with staleTime of 1min

  const App = () => {
   return (
     <ReactQueryConfigProvider config={{staleTime: 60000}}>
        <Foo/>
        <Bar/>
     </ReactQueryConfigProvider>
   );
 }

Foo.js, overrides the staleTime to at query level

// import statements above
const Foo = (props) => {
  const {status, data} = useQuery(["foo", {id: props.id}], fetchFooData, {staleTime: 0});
  ...
}

Bar.js, inherits the query config from App.js, and on success, initializes the query-cache
of Foo using the queryCache.seyQueryData with some initial value.

// import statements above
const Bar = (props) => {
  const {status, data} = useQuery(["bar", {id: props.id}], fetchBarData, {
   onSuccess: (result) => {
      queryCache.setQueryData(["foo", {id: "1234"}], {fooId: "1234", name: "foo"})
  }
 });
  ...
}

Considering Foo and Bar are two route based pages when I land on Bar.js and then navigate to Foo.js, I expect Foo.js to still do a fetch since I override the staleTime at Foo.js query level, however, I don't see this behavior.

If I do not initialize the Foo's cache in Bar.js it does a fetch.

Is this an expected behavior? If I want to pre-populate the cache of a different page while still fetching when I visit the page is there an alternative (while still using global config provider)

I created a sample project to illustrate this: https://github.com/niki4810/react-query-sample

Thanks,
Nikhil

[niki4810]

@tannerlinsley any chance you got to look into this :). Not sure if this is even an ani-pattern. Let me know.

[tannerlinsley]

I believe if you wanted to have it still fetch, you would need to do this:

queryCache.setQueryData(["foo", {id: "1234"}], {fooId: "1234", name: "foo"}, { staleTime: 0 })

Thus, the data will be stale immediately and fetch when you render it.

[niki4810]

let me try that @tannerlinsley

[niki4810]

Thanks @tannerlinsley That fixed my use case. I pushed your suggestion to my sample repo for reference: https://github.com/niki4810/react-query-sample

Thanks for your time 🍪 :)