useQuery for a search API

[robcaldecott]

I am trying to use useQuery with a search API from a React form and I am getting in a right pickle so am looking for some advice.

Assume the API in question can return a list of search results via /api/widgets?query=[user input] and I am using ky as a fetch alternative. And also assume that the form component is not doing the fetch directly and is instead wrapped in a container, calling onSubmit when it's time for a lookup.

So I could do something this like this, similar to an example in the docs:

function Form({ onSubmit }) {
  const [value, setValue] = React.useState("");

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(value);
      }}
    >
      <input value={value} onChange={(event) => setValue(event.target.value)} />
      <button>Submit</button>
    </form>
  );
}

function Container() {
  const [value, setValue] = React.useState("");
  const { refetch, ...query } = useQuery(
    ["widgets", value],
    () => ky.get("/api/widgets", { queryParams: { query: value } }).json(),
    {
      enabled: false,
    }
  );
  React.useEffect(() => {
    if (value) {
      refetch();
    }
  }, [refetch, value]);

  return (
    <>
      <Form onSubmit={(value) => setValue(value)} />

      {query.isLoading && "Loading..."}
      {query.isError && "Error!"}
      {query.data && "Success!"}
      {query.isIdle && "Idle"}
    </>
  );
}

It's a bit messy but it works, more or less. I don't like the useEffect that spots a change to the value in order trigger a refetch much. I guess I could use a ref to hold the value from onSubmit but that also feels a bit off.

But my first problem is that hitting submit a second time with the same value will not show the "Loading..." state, but instead it will silently refetch in the background. But for the app in question I want to clear and start again, even if the query is the same. So my first question is: how do I reset the query prior to calling refetch? I have tried cacheTime: 0 but that doesn't work. I also tried calling clear prior to the refetch but that just sends the code into an infinite fetching loop.

So to make this more readable I had a go at useMutation which gives me a Container that looks something like this:

function Container() {
  const [mutate, query] = useMutation((value) => {
    return ky
      .get("/api/widgets", {
        searchParams: { query: value },
      })
      .json();
  });

  return (
    <>
      <Form
        onSubmit={async (value) => {
          await mutate(value);
        }}
      />

      {query.isLoading && "Loading..."}
      {query.isError && "Error!"}
      {query.data && "Success!"}
      {query.isIdle && "Idle"}
    </>
  );
}

Well, personally I think that's a lot better on first glance because it avoids messing with an effect hook to kick off a search and if I search again the whole thing resets back to "Loading...".

But it feels like the wrong use case for useMutation which is documented to be used ...to create/update/delete data or perform server side-effects

So I'm torn. Any suggestions on the best way to handle user-initiated queries with user supplied params are welcome.

Thanks for reading.

[kevinvugts]

I am curious about this as well. @tannerlinsley could you please get back to this?

[kylegillen]

+1 Would be good to know what a best practice solution for search is.

[TkDodo]

this?
#957 (comment)

[kylegillen]

Could be, but as OP stated useMutation is documented as being for CUD and side-effects.

[kylegillen]

Shoot. Sorry, just realised your solution uses useQuery. Thanks!

[TkDodo]

It generally looks good. You can get rid of the useEffect by enabling the query as soon as you have a value:

  const [value, setValue] = React.useState('');
  const queryInfo = useQuery(
    ["widgets", value],
    () => ky.get("/api/widgets", { queryParams: { query: value } }).json(),
    {
      enabled: Boolean(value),
    }
  );

The query will start disabled, and enable itself and start fetching as soon as you update your value state with setValue.

[TkDodo]

but that doesn't scale well

I think it does :) What you need to know is: Did the user make any changes to the form when they hit submit? If they did, the search becomes a new query with a new key. If they didn't, it's a simple refetch. Most form libraries support some form of dirty detection. So this is more a "form" problem than a "query" problem.

The advantage of this approach is:

• the query is enabled, not disabled, so you get automatic refetches at the right time
• you have a cache, and you have a cache-per-key. meaning if the user goes back to a search that they did before, you'll get results immediately and potentially a background refetch (depending on staleTime).

[awiq]

First of all thanks again for reply :)

This would work, but I would have to track and propagate form state to parent components, reset "dirty" state after each submit (I'm not sure if it gets reset by default), add a condition if form has changed or not and do a fetch/refetch. Do this for each form and it becomes repetitive.

For me forms get input and produce output, they shouldn't care what I do with the output. And react-query doesn't allow me in an easy way to do imperative fetches/refetches without tracking form state, setting up conditions etc.

I think I'm just missing some kind of api here, that would work something like this:

const {data, setQuery} = useQuery({ queryKey, queryFn });
...
return <Form onSubmit={(queryKey => setQuery({ queryKey, forceFetch: true })} />  // fetch even if queryKey didn't change

and react query would handle the rest. I created custom hook which works similiar, but I thought this should be baked in react-query. It feels more "natural" for me than handling form state and tracking changes.

[TkDodo]

And react-query doesn't allow me in an easy way to do imperative fetches

Note that you can do queryClient.fetchQuery({ queryKey, queryFn }) and it will fetch + inform all subscribers that have a useQuery on the same key if that's what you want.

I have it on my list to do a filter-form example. I'm preaching "separate client state from server state" a lot an this comes in quite handy here because:

• I can have a filter form that makes a query to get the initial filter data
• the client state (filter form state) is initialized with undefined
• the state that we show in the ui is derived from client state + server state
• we only store user selections in the client state
• once the user submits the filter form, I can:
  • call onSubmit, which usually persists the filter state into the url for another query to pick it up (applied state)
  • reset the filter form state to undefined

The "dirty" detection is super easy because it's just "is my state undefined or not" 🤷

[havenchyk]

@TkDodo what if I want to refetch only on “submit” of the form, enabled field seems works only for the first time

[TkDodo]

@havenchyk show me a codesandbox example that doesn't work and I'll try to make it work.

[ArthurNyan]

The enabled option didn't work for me, but the refetch option in useEffect worked fine

import { useEffect, useState } from 'react';
import { Input } from 'antd';

import { SearchProps } from 'antd/es/input';
import { useGetUsers } from '@/entities/User';

const { Search } = Input;

interface UsersSearchProps extends SearchProps {}

export const UsersSearch = ({ ...props }: UsersSearchProps) => {
    const [search, setSearch] = useState('');

    const { isLoading, refetch } = useGetUsers(search);

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

    return (
        <Search
            placeholder="Search user"
            allowClear
            size="large"
            className="!w-[760px]"
            onSearch={setSearch}
            loading={isLoading}
            {...props}
        />
    );
};

import { useQuery } from '@tanstack/react-query';
import { getAdminUsers } from '../model/services';
import { AxiosResponse } from 'axios';
import { User } from '../model/types';

export const useGetUsers = (search?: string) => {
    const query = useQuery<AxiosResponse<User[]>, Error>({
        queryKey: ['users'],
        queryFn: () => getAdminUsers(search),
    });

    return { ...query };
};

[TkDodo]

you need to add search to the queryKey:

- queryKey: ['users'],
+ queryKey: ['users', search]

see: https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries#lazy-queries