reactjs 调用`setQueriesData`后，react-query不会重新获取缓存项的数据

4zcjmb1e 于 2023-06-05 发布在 React

关注(0)|答案(3)|浏览(144)

我正在构建一个具有以下行为的搜索页面：
1.当页面加载时，使用默认搜索参数执行查询
1.当用户更新搜索参数时，使用新参数执行查询
1.当用户clears搜索时，清除所有数据，但 * 不要 * 重新获取搜索，直到他们输入新的参数
1.当用户resets搜索时，使用默认搜索参数执行查询。
为了处理3的情况，我手动设置了查询的数据，因为我找不到一个方法可以让我在不重新获取的情况下清除数据。这导致了一个bug;如果用户更新搜索参数、然后清除搜索、然后再次使用先前的搜索参数，则查询不重新获取，并且手动设置的“清除的”数据持续存在。
我应该使用什么模式/方法来强制重取，即使查询键已经存在该高速缓存中？我曾尝试在clear调用中使用invalidateQueries，但这会导致查询重新获取，这不是所需的行为。

const queryClient = useQueryClient();
const [params, setParams] = useState(defaultParams);
const {data, isLoading, isFetching} = useQuery({
  querykey: ['search', params],
  queryFn: () => fetch(...),
});

const clearSearch = () => {
  queryClient.setQueriesData({queryKey: ['search'], exact: false}, []});
}

const resetSearch = () => setParams(defaultParams);

const submitSearch = (nextParams) => {
  // if this is called with params = A, and then clearSearch is called,
  // and this is called again with params = A, the query does not re-fetch
  setParams(nextParams);
}

reactjs

来源：https://stackoverflow.com/questions/76377145/react-query-will-not-refetch-data-for-cached-item-after-setqueriesdata-is-call

3条答案

按热度按时间

slmsl1lt1#

你应该使用useEffect钩子在每次params更改时重新获取

useEffect(() => {
// refetch
}, [params])

赞(0）回复(0）举报 2023-06-05

zkure5ic2#

您可以使用useQuery Hook中的enabled属性来完成您的结果。通过检查param状态是否不是有效的字符串，您可以在运行时启用或禁用useQuery。
例如：

export default function Dummy() {
  const [params, setParams] = React.useState('');
  useQuery({
     queryKey: ['search', params],
     enabled: Boolean(params),
     queryFn: () => console.log(params, 'print'),
  });

   return (
     <div className={styles.container}>
       <input
         type="text"
         value={params}
         onChange={(e) => setParams(e.target.value)}
       />
    </div>
  );
 }

赞(0）回复(0）举报 2023-06-05

qgzx9mmu3#

在咨询了一位同事之后，我最终将一个cacheBuster参数放入我的有效负载中，并将其分配给Date.now() | null;

const defaultParams = {foo: 'bar', cacheBuster: null};

const queryClient = useQueryClient();
const [params, setParams] = useState(defaultParams);
const {data, isLoading, isFetching} = useQuery({
  querykey: ['search', params],
  queryFn: () => fetch(...),
});

const clearSearch = () => {
  queryClient.setQueriesData({queryKey: ['search'], exact: false}, []});
  setParams(defaultParams);
}

const resetSearch = () => setParams({...defaultParams, cacheBuster: Date.now()});

const submitSearch = (nextParams) => {
  // Date.now() ensures the params are always different, so the query automatically re-runs.
  setParams({...nextParams, cacheBuster: Date.now());
}

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs 调用`setQueriesData`后，react-query不会重新获取缓存项的数据

3条答案

相关问题

热门标签

最新问答