Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Query Conditional Fetch Data from API not work

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?

Tags:

2

Answers


  1. 0

    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(),
});
    Login or Signup to reply.
  2. 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" );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search