Question

55

How to use Lazy query with React-query?

rated 0 times [ 60] [ 5] / answers: 1 / hits: 14030 / 2 Years ago, wed, december 29, 2021, 12:00:00

I am using React-query for my API calls. I am wondering if there is a way to call the query in a lazy way.

Meaning to call the query only when a query param changes.

This is what I currently have; I am using a hack with the "useEffect" where if recipeName changes, then run the refetch function.

export const searchRecipeByName = async (recipeName: string) => {

  return await api.get(

    `/recipes/complexSearch?apiKey=${process.env.NEXT_PUBLIC_SPOONACULAR_API_KEY}&query=${recipeName}&addRecipeInformation=true&fillIngredients=true`

  );

};

  const [recipeName, setRecipeName] = useState("");



  const { data, refetch } = useQuery(

    "homePageSearchQuery",

    () => searchRecipeByName(recipeName),

    { enabled: false }

  );



// HACK

  useEffect(() => {

    if (!!recipeName) {

      refetch();

    }

  }, [recipeName]);



  const handleOnSearchSubmit = async (recipeSearch: RecipeSearch) => {

    setRecipeName(recipeSearch.search);

  };

Preferably, I would like to call the query in the "handleOnSearchSubmit" function.

I could create a custom useLazyQuery hook to handle this, but I'm wondering if React-query has a native way to handle this.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janayr

Add To Favorites

Follow

Total Points: 80

Total Questions: 80

Total Answers: 114

Location: Venezuela

Member since Sat, Aug 22, 2020

4 Years ago

janayr questions

1 NestJS - Increase response timeout for particular http endpoint

Thu, May 19, 22, 00:00, 2 Years ago

1 Discord JS - interactionCreate and messageCreate

Sun, Oct 31, 21, 00:00, 3 Years ago

1 How to change the hover effect for react-bootstrap navbar link?

Fri, Oct 30, 20, 00:00, 4 Years ago

1 Circling motion animation in React Native

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Show autocomplete only after 3 entered chars in < datalist> field?

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 2 Years ago travion · Accepted Answer

Preferably, I would like to call the query in the "handleOnSearchSubmit" function.

This is a quite imperative way of thinking about things, but react-query is more declarative. You don't specify: "when I click that button, I want to fetch", but you just say: "these are the inputs I require" and react-query will refetch whenever those inputs change.

So what you want to do is put the things that you need for your query to run into the query key, so that react-query

caches it separately for every dependency

you can disable it as long as dependencies are not ready

const [recipeName, setRecipeName] = React.useState('')

const { isLoading, data } = useQuery(

  ['homePageSearchQuery', recipeName],

  () => searchRecipeByName(recipeName),

  {

    enabled: !!recipeName

  }

])

then, all you need to do is call setRecipeName in handleOnSearchSubmit, and react-query will do the querying.

some more things that you might want to consider:

if you want to avoid a hard loading state in between recipeName changes, set keepPreviousData: true

the above code will run a query every time the recipeName changes. If that doesn't happen on a button click, but say whenever the user types something in an input field, you you want to debounce that. For those cases, consider something like useDebounce:

const [recipeName, setRecipeName] = React.useState('')

const debouncedRecipeName = useDebounce(recipeName, 1000)

const { isLoading, data } = useQuery(

  ['homePageSearchQuery', debouncedRecipeName],

  () => searchRecipeByName(debouncedRecipeName),

  {

    enabled: !!debouncedRecipeName

  }

])

This will let you input data and show it in a text field, but only creates a new cache entry / fires a new request after 1 second of inactivity.

if you want to have a button that submits the form, it's best to "lift state up": Have a more global state that the query depends on, and some local state for the form. Once the user hits "submit", you save the user selection in the state that lives higher up, which will trigger a query. I like to use the url for this, and I have a complete codesandbox example here. The actual form state is uncontrolled in that example, but you can also use state or a form lib for that