How to refetch query with params

[skryvytskyi]

For example I created a query
const { data = { result: [], }, } = useQuery('data_sources', getDataSources);

This data used for select component and I wonna refetch it with { search: value } param.
Previously we had a variables params inside refetch, now it's removed.

[mrchickenburger]

I was wondering this as well

[tannerlinsley]

Recommended: Turn your variables into a permanent query key part and just update them with state or props

useQuery(['data_sources', { variables }], getDataSources)
// or
useQuery(['data_sources', variables], getDataSources)

[TkDodo]

I think you want to use an infinite query here.

[CharanRJS]

@TkDodo Hi Sir , Thanks for speedy reply , sir Actually Im using react table on other hand , can you suggest me any tutorial you know.Im trying to use useInfinityQueries but its not working with react-table

[beingsandthings]

@TkDodo
Hello, can i ask a question?
I want to create a download button where the user can click on a file and get a "fileId" value and download it with the value. However, I'm having some issues with useQuery to download the file. It downloads whenever the state it depends changes without click event.

To solve this problem, I've tried using refetch, useState, and useEffect to set a "fileId" value and trigger a download when the user clicks the button. It works well, but I feel like there might be a better way to do it.

I'm trying putting the "fileId" value in the queryKey as u said.

1. But I'm wondering if I should use useMutation instead of useQuery, since downloading a file could be seen as generating a file to be handed over, that is, having side-effects on the server.

2. Or should i use url to solve this problem? You'v mentioned using URLs in the situation where I need local state and have to lift the state up and put it in the query key.

[TkDodo]

I would useMutation here, especially if the file is generated every time you click the button.

[beingsandthings]

I would useMutation here, especially if the file is generated every time you click the button.

Thank u for answering! I have one more question. What if the file is not generated but retrieved from db..? Do u think useMutation is still available for this case?

[tannerlinsley]

Login Is not a query, it’s a mutation. Use useMutation instead. Tanner Linsley

…

On Apr 15, 2021, 7:04 AM -0600, Bert Catsburg ***@***.***>, wrote: Hello TkDodo, Thanks for your explanation and technically you are absolutely right. But it is fairly standard behaviour that you have a form, fill in some fields and want to do a query with those fields as input. For example a login-form where you input email,password and want to get the JWT-token back. Currently this requires a submitHandler, a useState, a useEffect and a useQuery. That's a lot of code for doing a simple query. If somebody can write the above functionality in a better and more simple way (and put it in the docs!!) it would clarify a lot. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[mrdulin]

@TkDodo Hi, can you take a look at my issue? Thanks. I hit this issue by using react-query on day 1. I've read most of the documentation and all of the examples but still doesn't find a solution.

My page has a search form and table with a paginator. So I have two states: searchCondition and pagination. When the user clicks the paginator, the pagination state will be changed so that a new channelList query will be made. That's ok. The search form includes two input form items and a "Query" button. The channelList query also can be triggered by the user click event.

Currently:

• Send the query on the component mount. - done!
• Made a new query when pagination state changed - done!
• User types something in the input form item(this will cause the searchCondition state changed) and clicks the "Query" button, then made a new query - done!

The problem is: When user types something in inputs and click the "Query" button, the searchCondition state changed and the handleSearchFormSubmit is triggered. I want to reset pagination to the initial value, then call channelListQuery.refetch(). But it sends two queries: one by channelListQuery.refetch() and another by useEffect(() => {}, [pagination]), that's not expected.

For example, I am currently on page 3, when the user types something and clicks the "Query" button. The handleSearchFormSubmit event handler was executed. There are two queries:

?current=3&channelName=xxx // triggered by channelListQuery.refetch()
?current=1&channelName=xxx // triggered by useEffect

It's correct. Because the resetPagination() will not update pagination immediately, and pagination used by refetch() is the previous value.

const { searchCondition, setSearchCondition } = useSearchCondition(initialSearchCondition);
  const { pagination, setPagination, resetPagination } = usePagination();
  const channelListQuery = useQuery(
    ['channelList', pagination, searchCondition],
    async () => {
      const getChannelListParams = omitFalsyFields({
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
        ...searchCondition,
      });
      const { code, result } = await apis.channel.getChannelList(getChannelListParams);
      if (code === '0') {
        return result;
      }
    },
    { initialData: { totalItem: 0, resultList: [] }, refetchOnWindowFocus: false, keepPreviousData: true, enabled: false, cacheTime: 0 },
  );

  useEffect(() => {
    channelListQuery.refetch();
  }, [pagination]);

  const handleSearchFormSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    resetPagination();
    channelListQuery.refetch();
  };

// ...
pagination={{
            total: channelListQuery.data.totalItem,
            ...pagination,
            showQuickJumper: true,
            showSizeChanger: true,
            onChange: (page: number, pageSize?: number) => {
              const nPagination = { current: page, pageSize: pageSize || paginationInitialState.pageSize };
              setPagination(nPagination);
            },
          }}

Maybe refetch() with parameters inside onChange event of paginator and handleSearchFormSubmit event handler instead of listening to the changes of the state could solve this situation? That's why I came to this issue. I solved it this way before I used react-query. Like this:

  useEffect(() => {
    channelListQuery.refetch();
  }, []);

  const handleSearchFormSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    channelListQuery.refetch({...paginationInitialState, ...searchCondition});
  };
//  pagination
onChange: (page: number, pageSize?: number) => {
              const nPagination = { current: page, pageSize: pageSize || paginationInitialState.pageSize };
              setPagination(nPagination);
              channelListQuery.refetch({...nPagination, ...searchCondition});
            },

So how does react-query handle this situation?

[TkDodo]

I answered the question on StackOverflow: https://stackoverflow.com/a/71093384/8405310

[cliffordfajardo]

My page has a search form and table with a paginator. So I have two states: searchCondition and pagination. When the user clicks the paginator, the pagination state will be changed so that a new channelList query will be made. That's ok. The search form includes two input form items and a "Query" button. The channelList query also can be triggered by the user click event.

I was struggling with this today as well; I though maybe refetch would help, but unfortunately, you can't pass down arguments to it; even if that did work, I would need to pass my refetch function down as props

I decided to go with the updating the URL solution that @TkDodo mentioned in the comment above, which has the added benefit of

• shareable URLs
• not needing to pass down props

[TkDodo]

this is a perfect use case for it 👍

[adriannecris]

But how do you handle debouncing if your enabled option is dynamic?

[1mehdifaraji]

  const {
    refetch: orderInvoiceRefetch,
  } = useQuery(
    ["order-invoice"],
    (orderId) => axios
        .get(`/orders/invoice?order_id=${orderId}`)
        .then(({ data })) => data),
    { enabled: false }
  );

I need to pass id param to the orderInvoiceRefetch refetch function and I don't want to use website url query.

orderInvoiceRefetch({
   queryKey: id,
});

How can I pass a parameter to the refetch function?

[vossmalte]

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

[1mehdifaraji]

Sad to hear, However I did it with react's own state with enabled option of react query like this:

const [orderId, setOrderId] = useState<string | null>(null);

const { data } = useQuery(["order-user", orderId], ({ queryKey }) =>
      axios
        .get(`/orders/user?order_id=${queryKey[1]}`)
        .then(({ data }: { data: OrderUserResponse }) => data),
    { enabled: !!orderId }
);

[TkDodo]

that's the idiomatic way - why is that sad? Now you don't need to call refetch manually - a change in orderId will trigger a new fetch automatically. Data is also cached by its inputs, thus avoids race conditions and we can show stale, cached data earlier when switching between orderIds.

[1mehdifaraji]

@TkDodo I couldn't pass arguments to the useQuery and had to use react useState or the url query withenabled option to accomplish such a simple thing.

[vossmalte]

It is called refetch as it should trigger the same fetch again, so no params.