Question: how to refetch queries passing variables?

[marcelokanzaki]

I have two queries and I would like to update them both to perform a search with the same value from another component:

// components/activeUsers.jsx

const { status, data } = useQuery(['users', 'active'], (x, y, searchTerm) => {
  return fetch('/api/users/active?q=' + searchTerm)
}, {
  refetchInterval: 0
})

// components/inactiveUsers.jsx

const { status, data } = useQuery(['users', 'inactive'], (x, y, searchTerm) => {
  return fetch('/api/users/inactive?q=' + searchTerm)
}, {
  refetchInterval: 0
})

// components/search.jsx

import React, { useState } from 'react'
import { queryCache } from 'react-query'

export default () => {
  const [searchTerm, setSearchTerm] = useState('')
  
  const change = event => {
    const { value } = event.target

    setSearchTerm(value)

    // I KNOW THIS DOESN'T WORK. Its just to communicate what I wish to accomplish
    queryCache.refetchQueries('users', value)
  }

  return (
    <input type="search" value={searchTerm} onChange={change} />
  )
}

[denisborovikov]

Here's an example of how it can be implemented.

You'll probably need to debounce your onChange event. See #293

Discussions is a better place for further questions.

[AirWick219]

Here's an example of how it can be implemented.

The example was great! But if I want to trigger a refetch from a child component. Is the best practice to pass the setSearchTerm to the child component to update the parent's searchTerm state or if there is any other way to refetch the query with new searchTerm from the child component? I tried to use queryClient.refetchQueries(["users", { status: "active", searchTerm: <newSearchTerm> }]) but that only refetch with the parents state.

[denisborovikov]

Because React uses unidirectional data flow, where data flows from parent to children, it's absolutely normal practice to pass a state setter function like setSearchTerm down to the child component in order to update the parent's state.

[DanielBoa]

The provided example is misleading:

  const { status, data } = useQuery(
    ["users", { status: "active", searchTerm }],
    (status, searchTerm) => {
      // This implies that the second argument of the above array is being destructured as the arguments of this function, that is not the case.
      //`status` here actually equals "users"
      //`searchTerm` is `{ status: "active", searchTerm }`
      console.log(status, searchTerm);
    }
  );

[johnschult]

This is not a solution to the original question. First of all, this executes the query immediately, which is not desirable. Additionally, it requires having to manage state. I believe that what @marcelokanzaki was looking for is the same thing I am... I want to be able to do what I can do with Apollo Client's useLazyQuery. None of the proposed answers to this achieve that.

[qkreltms]

I think refetch(query, options) would be simpler way. Any plans for implementing this in the future?

[ammoradi]

2023 - We still need this feature!

[TkDodo]

in 2023, it's still conceptually not possible. You can't refetch with different variables because you need to create a new query, a new cache entry, and a new observer to have things work the way you'd expect them to. So changing the key is the way to go. It might mean you have to think from "imperative fetching" (when I click here, I want to refetch with these values) to "declarative fetching" (when these things change, fetch with these things), but it's worth it:

https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch

[ammoradi]

@TkDodo thanks for sharing your thoughts and the article.
In a rare case I need to pass a fresh timestamp as the parameter of the query but not every time and only in some conditions:

• putting the fresh value inside the queryFn spams the endpoint.
• creating a separate query for each call is not clean and efficient,
• and setting the timestamp in the state and pass it to the queryFn (as you suggested in your article) will cause an unnecessary additional re-render.

What is the cure?

Doesn't refetch(query, options) solve all the problems above? We can mention it to the users that this way of refetching replaces the catch.

[TkDodo]

In a rare case I need to pass a fresh timestamp as the parameter of the query but not every time and only in some conditions

This sounds to me like you're trying to do some cache busting / invalidation for the server ?

I mean, you can always stick in in a ref, put that ref in meta on useQuery, which is passed to the QueryFunction, where you can read it, then write to the ref before you call refetch 🤷 .

[incepter]

This feature is being loved by RQ users though Dominik.
I don't know, but being able to run an async flow while not relying on a render (and enabled) and passive commit phase is still OP and has many valid use cases.
This may get abused and it will be very challenging tu spport with Suspense and Transitions.. But i think we can still do this.

I understand your concerns about having that bijection between query and keys, which makes life easier with cashing and renders etc..

Imo, that's a tradeoff to put.
It's like react-async-states is the mirror of rq when it comes to this particular behavior..

[changyeamoon]

@tannerlinsley any updates on this? It would be very helpful to refetch with different variables.

@denisborovikov sandbox no longer works

[denisborovikov]

@changyeamoon I cleaned up my codesandbox. Recovered.

[changyeamoon]

ah thank you @denisborovikov !

Its simple :p -I wanted to see something that didn't involve adding state because i'm passing back state to the component using the query.

I thought refetching with new variables would be the answer, but I think I see why we can't do that. The original query still has the original parameters passed into it so refetching with new ones and updating the data would cause problems?

[denisborovikov]

Not sure I get it. What kind of problems? Why do you call it refetch if it's a new query with different parameters?

[changyeamoon]

Exactly, that would be the problem. If I wanted to call refetch with new parameters; its a new query.

Here is a quick simplified version of what i was trying to do, it is not at all functional nor checked, but hoping it gets the point across.

function useQueryData(pagination) {
  return usePaginatedQuery(['data', pagination], () => {
      return fetch('/api/data/?pagination=' + pagination)
    })
}

// What I wanted to do 
function App() {
  const { resolvedData, refetch } = useQueryData(0)

  return <Table fetchData={(pagination) => refetch(pagination)} />
}

// What I have to do - (I did not like that I had to reinstate the state)
function App() {
  const [pagination, setPagination] = useState(0)
  const { resolvedData, refetch } = useQueryData(pagination)

  return <Table fetchData={(newPagination) => setPagination(newPagination)} />
}

// assuming nothing in this component can be changed or altered
function Table({ fetchData }) {
  const [pagination, setPagination] = useState(0)

  useEffect(() => {
   fetchData(pagination)
  }, [pagination])

  return <button onClick={() => setPagination(1 + pagination)} />
}

[denisborovikov]

I see what you mean. You probably can use queryCache.prefetchQuery but it's not that elegant as you suggesting.

I'd design the Table component as uncontrolled and accept pagination and onPaginationChange callback as props rather than having it as an internal state. But looks like it's not your case.

[samrudhsshetty]

I am using this to download files, I am having a state called documentId, and when I click on the download button I set the documentId and this will refetch the query and onSuccess I set documentId back to null. This works for me @changyeamoon . Is this a bad practice @denisborovikov ?

[denisborovikov]

Sounds ok to me. Personally, I'd prefer to initiate a download explicitly and use useMutate for this.

Something like

const [mutate] = useMutation((documentId) => {
  // Fetch data here
  return 'payload for documentId ' + documentId;
}, {
  onSuccess: (data) => {
    // Save data to file here 
    console.log(data);
  },
})

return (
  <div className="App">
      {/* Pass documentId here */}
    <button onClick={() => mutate(123)}>Download</button>
  </div>
);

but I'm not the one who set the best practices here.

[samrudhsshetty]

Ah I see, I was of the impression that useMutation is only for CUD operations.

[mikesilence]

I have selector with few params. When user select param i need refetch query in another component. How i can do it?

exm: sandbox;

[zirkelc]

I use the React Hook Form for my forms which works with uncontrolled components. Therefore, the current values are not reflected in useState variables. On form submission, I retrieve the current form values and would like to pass it as variables to the React Query's refetch function.

Is there any plan to introduce this feature any time soon?

[TkDodo]

Why not useQuery for that?

[zirkelc]

Because I like the convenience of calling mutateAsync on form submission, because that's the moment I actually retrieve the form values from the uncontrolled components and pass them as variables to mutateAsync. But, a second form submission with the same values (and variables) should return the same results.

[TkDodo]

How about a disabled useQuery that you enable onFormSubmit or keep it disabled and use refetch()

[zirkelc]

I have to think about that. Disabled query and refetch() could work.
OnFormSubmit I would first write the form values into an useState for the variables and then call refetch, which would be executed after the state update has been updated. Do I see it correctly?

[TkDodo]

i think refetch executes immediately. What I would is is put the values into useState, and have them be what enables the query:

const [values, setValues] = useState(undefined)

useQuery(['key', values], () => fetchIt(values), { enabled: Boolean(values) })

<form onSubmit={(data) => setValues(data}}

[hd4ng]

• I have a similar issue. I can solve it via using ref.
• For example, I have a list of config, each config has some actions like enable, disabled (all are GET APIs). Every time user clicks on an action I need to fire an action with the corresponding config id.
• Instead of passing configId which has value undefined by default, I use a ref instead. For example:

// Api call
async function disabledConfig(configId?: string) {
  if (typeof configId === 'undefined') {
    return
  }

  // If you have id, make you API call here ...
  // ...
}

// I create a custom hook for react query. 
// I set enable = false here for making a manual fetch via `refetch`. And by using ref, instead of primitive value,
// I will get the updated value for making API call
function useDisabledConfig(configIdRef: React.MutableRefObject<string | undefined>) {
  return useQuery('disable-config', () => disabledConfig(configIdRef.current), {
    enabled: false
  })
}

// In Config component
function Config(props: {configId: string, onDisabled: (id: string) => void}) {
  const { configId, onDisabled } = props

  function handleDisabled() {
    onDisabled(configId)
  }

  return <button onClick={handleDisabled}>Disabled</button>
}

function ListConfig() {
  // For example, you get list config from somewhere: API response or props
  const listConfig = ...
 
  // This is the ref I use for handle disabled
 const configIdRef = useRef<string | undefined>()

  // Make API call with custom hook
  const {refetch: disableConfig} = useDisabledConfig(configIdRef)

 function handleDisable(configId: string) {
  // Update the ref to the latest id value
  configIdRef.current = configId

  // Make manual API call
  // When this function is call, the custom hook by using the ref will get the lates configId
  disableConfig()
 }

  return <>
    {
      listConfig.map(config => <Config key={config.id configId={config.id} onDisabled={handleDisable} />) 
    }
    </>
}

[alex-oser]

I have a slightly different use case than I see above. I have Redis setup to cache queries server side. Sometimes I may to want fetch results ignoring the cached Redis data, but normally I just pull from the Redis cache if it's available.

If choosing to skip the cache I was hoping to use refetch and pass an extra param, but as I see from this thread that does not work.

Alternatively I guess I could have a separate mutation to clear the cache server side and then refetch, but I am wondering if there is any way to do it with 1 request.

const {
  isFetching,
  data,
  error,
  refetch,
} = useQuery(
  ["user", user], 
  (skipCache = false) => fetch(`/api/${user}?skipCache=${skipCache}`).then(res => res.json())
);

// On button click refresh and skip Redis cache
refetch(true);

[TkDodo]

Alternatively I guess I could have a separate mutation to clear the cache server side and then refetch, but I am wondering if there is any way to do it with 1 request.

Those are two different things imo - clearing the cache is not the same as bypassing the cache. If you want to clear the cache, it's a side-effect and I think that you should use a mutation for that. But it doesn't sound like skipCache should actually clear the cache - just bypass it? Or is the result from this skipCache call also persisted in the cache?

Anyhow, I don't see a good solution to do this with just queries. What you can do is just have a mutation and have that mutation return a result that you then put into the query cache. See Updates from Mutation Responses.

[alex-oser]

This exactly what I needed! I ended up coming up with a not so ideal way with 2 queries by coercing a query to act like a mutation. I set enabled: false and then called it with refetch. Should be an easy refactor and nice cleanup to convert to useMutation instead. Thanks!

const useUserQuery = (user: string) => {
  return useQuery(["user", user], () => getUserData({ user }));
};

const useUserQuerySkipCache = (user: string) => {
  return useQuery(
    ["user", user],
    () => getUserData({ user, skipCache: true }),
    { enabled: false }
  );
};
const { refetch } = useUserQuerySkipCache(user);

[incepter]

Hey guys,

I am sorry I did not realize that this feature is really wanted by everyone!

I am the maintainer of react-async-states which has a somehow squashed model compared to react-query, but they are so similar with different API, I did dig into this codebase and following, a screenshot of the first ever refetch taking args working unit test! So yeah, we can have this :-)

It required a lot bunch of edits that impacted nearly all files, my work is far from being done (I did some ts-ignores and some as just to bypass what was there!) It will require the intervention of people that know the library and the codebase better than me! Since I never used it before. The API is still to be defined.

Now, I don't know what to do with the work I've done since this is a proprietary codebase and my ideas are likely to be fought! But I will be open to discussion and ideas to make this feature "working" and working good!

[incepter]

Probably the following text is for the maintainers, if they can do something about it..

Fllowing my journey into the codebase today, I found that there are a lot of things that slow down the maitainability of the library, such as:

• Almost all types have "optional" generic types, it makes your tasks like hell, especially adding new generic types!
• [T] extends [never] and split the abstraction on never isn't a good idea, they will likely break the first time you change that "never" that is unknown in other places
• Too many classes that collaborate together (query, querycache, queryobserver, queryclient...)
• isStale is determined from observers... not from the query itself
• Since the library has a decentralized instances model, it means no sense to orchestrate and manipulate them through the client, it should be a direct relation (better perf and less coupling)

[sumicet]

Wouldn't fetchQuery work?