如何在每次输入更改时获取现有缓存数据? [英] How to fetch existing cache data on every input change?

问题描述

我的应用程序有一个用户 input 一个 id 作为 request 和匹配的 response data 发送id 被渲染.

My application has a user input an id to send as a request and the response data that matches that id is rendered.

如果 data 已经存在于 cache 中，我希望应用程序在每个 input 上从 cache 中获取改变.

If the data already exist in the cache, I'd like the application to fetch from the cache on each input change.

如果data在cache中不存在，则应用程序只能通过让用户点击来发送request提交按钮.

If the data does not exist in the cache, the application can only send the request by having the user click the submit button.

一旦用户输入input，我将访问cache 并检查当前输入id 是否存在于每个input改变.如果是这样，则在 submit 按钮 disabled 时渲染 data.否则启用提交按钮，以便用户可以发送request.

Once a user types in the input, I would access cache and check if the current input id exists on every input change. If so, render the data while the submit button is disabled. Else enable the submit button so that the user can send the request.

根据研究，React Query 的 queryClient.getQueryCache 我相信我需要.我会通过在 queryCache 上使用 .includes 来检查输入 id 是否存在于 cache 中.之后我该怎么办?这是实现功能的正确方向吗?

From research, React Query's queryClient.getQueryCache is what I believe I need. I would check to see if the input id exists in the cache by using .includes on queryCache. What would I do afterwards? Is this the correct direction to implement the functionality?

这是我当前的设置.请让我知道如何继续实现请求的功能.https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

Here is my current setup. Please let me know how to move forward implementing the requested functionality. https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
    .then((res) => res.data);
  };

const cacheData = queryClient.getQueryData(["rickandmorty", idQuery], {
    exact: false
})

const onInputChange = event => {
    setIdQuery(event.target.value, () => {
        cacheData.includes(idQuery)
            handleRickAndMortyFetch()
    })
}

const disable = isLoading || parseFloat(formId) === idQuery || !idQuery || cacheData?.id === idQuery;

<form onSubmit={handleSubmit(onSubmit)}>
  <input
    type="number"
    name="rickAndMortyId"
    placeholder="Between 1 and 671"
    ref={register}
    disabled={isLoading}
    onChange={onInputChange}
  />
  <button type="submit" disabled={disable}>
    Search Character
  </button>
</form>

推荐答案

我想你想要的是queryClient.getQueryData(["rickandmorty", idQuery]).这将为您提供缓存中特定查询键的数据.如果这是 undefined，则缓存中没有该键的数据，因此您可以启用提交按钮.

I think what you want is queryClient.getQueryData(["rickandmorty", idQuery]). This will give you data from the cache for a specific queryKey. If that is undefined, you have no data in the cache for that key, so you can enable the submit button.

但是您需要让 react-query 为您管理数据.这意味着您的 handleRickAndMortyFetch 函数应该返回一个 Promise - 不需要使用本地状态 (rickAndMortyCharacter) - 这只是 从 react-query 返回的 data 属性

But you need to let react-query manage the data for you please. That means your handleRickAndMortyFetch function should return a Promise - there is no need to use local state (rickAndMortyCharacter) - this is just the data property returned from react-query

这篇关于如何在每次输入更改时获取现有缓存数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！