React-query: How to avoid triggering function call if query is empty?

Question

I am using react-query to call an API. The call works well and is performed each time a query value is updated in an input field.
Unfortunately, it also triggers an API call even when the query is empty.

For example, when the user loads the app, the input (and hence query) will be blank.

How to trigger API calls only when there is a query?

Code

// API call
export async function myQuery(query) {
  try {
    const res = await ax.get("myapiurl", {
      params: { query },
    });
    return res.data;
  } catch {
    return null;
  }
}

// react-query
const { status, data } = useQuery(
  ["myquery", { query }],
  () => myQuery(query)
);

Abhimanyu · Accepted Answer · 2021-08-18 16:16:51Z

15

There is an enabled flag in react-query for this exact use case.

Usage example

const { status, data } = useQuery(
  ["myquery", { query }],
  () => myQuery(query).
  { enabled: !!query }
);

Docs for reference

answered Aug 18, 2021 at 16:16

Abhimanyu

15.2k13 gold badges71 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mykyta Over a year ago

Is there a way to prevent fetching when refetch method get called? react-query?

nfadili Over a year ago

Here is a slightly more relevant doc link: tanstack.com/query/v4/docs/guides/dependent-queries

Sagi Rika · Accepted Answer · 2020-06-03 15:44:07Z

1

You can achieve that with a simple if sentence:

// apicall
export async function myQuery(query) {
  try {
    const res = await ax.get("myapiurl", {
      params: { query },
    });
    return res.data;
  } catch {
    return null;
  }
}

// react-query
  const { status, data } = useQuery(
    ["myquery", { query }],
    () => {
      if (query) {
        return myQuery(query)
      }
  );

edited Jun 3, 2020 at 15:44

answered Jun 3, 2020 at 15:17

Sagi Rika

2,9993 gold badges17 silver badges35 bronze badges

2 Comments

HelloWorldEngineer Over a year ago

It doesn't work, I still have the loader.Also, I tried to write if(!query){null} before the try/catch block, but when doing so, react-query keeps loading forever.

Sagi Rika Over a year ago

I editted the code, please try this now. You might want to delete the lone return in the useQuery callback

Chinonso Viktor · Accepted Answer · 2023-07-09 09:50:36Z

I encountered the same error while working on a project that involves making API requests based on user input. After conducting my research, I discovered a solution that you can refer to for more clarity. You can check out TanStack Query for further details. [dependent queries ][1].

To modify the useQuery hook to only fetch data when a user enters and submits a value, you need to make the following adjustments:

const { data, isError, isInitialLoading } = useQuery({
    queryKey: ['images'],
    queryFn: async () => {
        const { data } = await customFetch.get(`/photos?page=1&query=${userInput}&client_id=${import.meta.env.VITE_CODE_BOOK}`);

        const { results } = data;

        return results;
    },
    // setUserInput to an empty string and enable page render
    onSuccess: () => {
        setUserInput('');
        toast.success('Success');
   },
  // force usequery to only fetch when user submits a value
    enabled: !!userInput,
});

You can the use isInitialLoading to display your loader and isError in the case of error [1]: https://tanstack.com/query/latest/docs/react/guides/dependent-queries

Eldar Nasyrov · Accepted Answer · 2023-11-27 07:30:23Z

0

if you use enabled then uoy can`t revalidate query by key. I advice use useQueries and return empty array if query is null

// Then get the users messages
const useMyQuery = (query: string | null) => {
  return useQueries({
    queries: query
    ? [query].map(q => {
        return {
          queryKey: ['myapiurl', q],
          queryFn: () => myQuery(q),
        };
      })
  : [], // if query is null, an empty array will be returned
})

}

it is pain...

answered Nov 27, 2023 at 7:30

Eldar Nasyrov

715 bronze badges

Collectives™ on Stack Overflow

React-query: How to avoid triggering function call if query is empty?

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related