问题描述
只要useQuery的变量发生更改,我就会使用refetch()
来过滤列表。每次更改变量prop时,它都会根据过滤器获取结果,当服务器的结果为空列表[]时,refetch()方法将返回缓存的结果,而不是空列表[]。
const { loading,error,data,fetchMore,refetch } = useQuery(Users,{
variables: {
userNumber: userNum,},});
useEffect(() => {
if (userNum){
refetch();
}
},[userNum]);
因此,每当userNum prop更改具有该userNum的用户列表时,它都会获取更新的结果,但是,如果从服务器返回的用户列表为空(因为没有用户拥有此数字),则可以看到前一个缓存结果而不是空列表。
我尝试过
fetchPolicy: 'cache-and-network',nextFetchPolicy: 'cache-first',
,仍然获得缓存的结果,而不是空列表。
我也曾在typePolicies中尝试过merge()并成功了!但是,当我应用relayStylePagination时,它将再次获取缓存的结果,而不是空列表。
uri: 'http://localhost:5000/graphql',cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
devices: relayStylePagination(),merge(existing = {},incoming) {
return { ...existing,...incoming };
},}),});
我也尝试过使用键字段,并且在服务器返回空列表时更新缓存,但中继分页不起作用。进行中继分页工作的唯一方法是仅将其放置如下:
fields: {
devices: relayStylePagination(),
` 我的查询是这样的:
$after: ID
$userNum: Int
$dpiGt: String
$dpiLt: String
) {
users(
after: $after
userNumber: $userNum
first: 30
filter: { dpiGt: $dpiGt,dpiLt: $dpiLt }
) {
edges {
cursor
node {
id
name
userNumber
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
系统详细信息:
OS: macOS 10.15.4
Binaries:
Node: 12.16.1 - ~/n/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - ~/n/bin/npm
browsers:
Chrome: 86.0.4240.80
Firefox: 81.0.1
Safari: 13.1
npmPackages:
@apollo/client: ^3.2.3 => 3.2.5
解决方法
不确定这会解决您的问题,但值得一试。
在调查和阅读 Apollo 文档后,在 refetch section 下,我发现此描述可能对您的用例有用。
幸运的是,useQuery 钩子的结果对象通过 networkStatus 属性提供了有关查询状态的细粒度信息。为了利用这些信息,我们需要将 notifyOnNetworkStatusChange 选项设置为 true,以便我们的查询组件在重新获取正在进行时重新呈现:
import { useQuery,NetworkStatus } from '@apollo/client';
...
const { loading,error,data,fetchMore,refetch,networkStatus } = useQuery(Users,{
variables: {
userNumber: userNum,},notifyOnNetworkStatusChange: true,});
if (networkStatus === NetworkStatus.refetch) return <div>Refetching!</div>;
...