React Query Conditional Fetch Data from API not work

Question

I want to fetch data based on a custom hook in react query.

if (filter == "NEW") {
  const { data, isLoading } = useGetConsultasByStatusQueryDate({
    status: "NEW",
    queryDate: allTimeDateQuery(),
  });
}

but shows the next error:

React Hook "useGetConsultasByStatusQueryDate" is called conditionally. React Hooks must be called in the exact same order in every component render.

The custom hook is:

export const useGetConsultasByStatusQueryDate = (query: {
  status: string;
  queryDate: string;
}) => {
  return useQuery({
    queryKey: ["consultas", { query }],
    queryFn: async () => {
      const consultas = await getQueryFetch(CONSULTAS_URI, query);
      return consultas as Consultas | undefined;
    },
  });
};

How can I fetch data conditionally using React-Query?

Drew Reese · Accepted Answer · 2024-09-09 22:30:07Z

Conditionally calling React hooks breaks the Rules of Hooks.

You appear to want to only make the query request when the status is "NEW". For this you can specify when the useQuery hook should be enabled, and unconditionally call the custom query hook. See Disabling/Pausing Queries for more details.

Example Implementations:

Using the query.status property:

export const useGetConsultasByStatusQueryDate = (query: {
  status: string;
  queryDate: string;
}) => useQuery({
  queryKey: ["consultas", { query }],
  queryFn: async () => {
    const consultas = await getQueryFetch(CONSULTAS_URI, query);
    return consultas as Consultas | undefined;
  },
  enabled: query.status === "NEW"
});

const { data, isLoading } = useGetConsultasByStatusQueryDate({
  status: "NEW",
  queryDate: allTimeDateQuery(),
});

Adding and passing an enabled property:

export const useGetConsultasByStatusQueryDate = ({ enabled, ...query }: {
  enabled: boolean;
  status: string;
  queryDate: string;
}) => useQuery({
  queryKey: ["consultas", { query }],
  queryFn: async () => {
    const consultas = await getQueryFetch(CONSULTAS_URI, query);
    return consultas as Consultas | undefined;
  },
  enabled
});

const { data, isLoading } = useGetConsultasByStatusQueryDate({
  enabled: filter == "NEW",
  status: "NEW",
  queryDate: allTimeDateQuery(),
});

Grisho4ek · Accepted Answer · 2024-09-09 22:21:44Z

0

useQuery has enabled option. Rewrite your custom hook like this:

export const useGetConsultasByStatusQueryDate = (query: {
    status: string;
    queryDate: string;
    
},enabled: boolean;) => {
    return useQuery({
        queryKey: ["consultas", { query }],
        queryFn: async () => {
            const consultas = await getQueryFetch(CONSULTAS_URI, query);
            return consultas as Consultas | undefined;
        },
        enabled,
    });
};

Usage of the custom hook:

const { data, isLoading } = useGetConsultasByStatusQueryDate({
            status: "NEW",
            queryDate: allTimeDateQuery(),
            
        },filter === "NEW" );

edited Sep 9, 2024 at 22:21

answered Sep 9, 2024 at 22:09

Grisho4ek

3042 silver badges6 bronze badges

Collectives™ on Stack Overflow

React Query Conditional Fetch Data from API not work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related