一种解决办法是在组件的state中存储上一次请求的数据,并在新请求还没返回前使用它。这可以通过使用Apollo Client的更新缓存机制来实现,具体做法如下:
首先,在组件中定义要缓存的查询以及查询变量:
import React, { useState } from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const GET_USERS = gql`
query users($search : String!) {
users(search: $search) {
id
name
email
}
}
`;
const Search = () => {
const [search, setSearch] = useState('');
const [cacheData, setCacheData] = useState(null);
const { data, loading } = useQuery(GET_USERS, {
variables: { search }
});
// 若新请求未完成,则返回缓存数据
if (loading && cacheData) {
return ;
}
// 若新请求完成,则更新缓存数据
if (data) {
setCacheData(data.users);
return
}
return (
setSearch(e.target.value)} />
{!loading && data &&
}
);
};
在这个例子中,如果新的查询还没有返回,我们会跨帧使用 cacheData
变量保存上一次的查询数据。在 data
结果可用时,这个变量会被更新。如果有需要,我们可以安排某个更新程序来自动更新Apollo Client缓存,从而使查询数据在其实际存储位置中得到更新:
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
cache: new InMemoryCache(),
...
});