React-Query, useQuery returns undefined only after loading is complete

Question

I am using the react-query package in my react app. I have a pattern going which uses useQuery to get data from an api with axios. Multiple endpoints work except a GET search/params endpoint. Axios returns the expected data but once loading is complete in useQuery, undefined is returned.

import React from "react";
import { useQuery } from "react-query";
import { api } from "../../../api";

export const useSearch = (query) => {
  const searchResults = useQuery(
    api.clubhouse.searchCacheKey(query),
    api.clubhouse.search({ params: { query: query } })
  );

  let searchData = [];

  let isLoading = searchResults.isLoading;

  if (!isLoading) {
    searchData = searchResults.data;
  }

  return { searchData, isLoading };
};

Once isLoading: false, searchResults becomes undefined and I see this error TypeError: config.queryFn.apply is not a function. If I log inside the api.clubhouse.search (which contains the axios call) I can see the correct data. This pattern works fine for other api calls as well...

Chris Farmer · Accepted Answer · 2021-08-05 15:44:17Z

2

I'm guessing that this may be your issue:

api.clubhouse.search({ params: { query: query } })

The search function here I am guessing is returning a promise, but you need to pass in a function to useQuery that returns a promise instead of the promise itself. So, maybe make a change like this:

const searchResults = useQuery(
  api.clubhouse.searchCacheKey(query),
  () => api.clubhouse.search({ params: { query: query } })
);

answered Aug 5, 2021 at 15:44

Chris Farmer

25.5k37 gold badges125 silver badges170 bronze badges

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

2 Comments

user15395591 Over a year ago

This seemed to work! Not sure why my other useQuery functions worked but oh well... Thanks!

TkDodo Over a year ago

probably because they didn’t have any parameters. If you pass in api.clubhouse.search you pass in the function itself. But if you invoke the function you pass in the result.

Collectives™ on Stack Overflow

React-Query, useQuery returns undefined only after loading is complete

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related