Urql useQuery如何在查询或变量变更时清除上一次查询的旧数据？

通用方案（适配所有useQuery实现） #

给useQuery绑定和查询变量关联的key属性，变量变更时会自动销毁重建整个useQuery实例，直接丢弃所有旧数据：

const [search, setSearch] = useState('');

// 该hook会拉取与用户输入的search变量匹配的数据
const [result] = useQuery({
  query: "...",
  variables: {search}
}, {
  key: search // 查询变量变更时hook重置，旧数据直接清除
});

// 拉取新搜索结果的过程中result.data为undefined，不会残留上一次的结果
const data = result.data;


return (
  <TextInput onChangeText={setSearch} />
);

分库专属配置方案 #

TanStack Query（原React Query） #

该库默认不会保留上一次查询的旧数据，只有手动配置keepPreviousData: true才会触发保留旧数据的行为，你只要删除该配置或者显式设置keepPreviousData: false即可符合需求。如果需要在请求过程中显示加载状态，直接判断isLoading字段即可：

const { data, isLoading } = useQuery({
  queryKey: ['search', search],
  queryFn: () => fetchSearchResult(search),
  keepPreviousData: false // 默认为false，可省略
})

if (isLoading) return <Loading />

Apollo Client useQuery #

Apollo Client默认会在变量变更请求新数据的过程中保留旧数据，除了上述加key的方案外，你也可以通过networkStatus字段判断当前是否在加载新的查询结果，手动过滤旧数据：

import { NetworkStatus } from '@apollo/client';

const [search, setSearch] = useState('');
const { data, networkStatus } = useQuery(SEARCH_QUERY, {
  variables: { search },
  notifyOnNetworkStatusChange: true // 必须配置才可监听到变量变更后的加载状态
});

// 加载新查询结果时手动清空旧数据
const currentData = networkStatus === NetworkStatus.loading ? undefined : data;

内容的提问来源于stack exchange，提问作者Yairopro