Apollo Client 是一个用于 JavaScript 应用的 GraphQL 客户端,它提供了缓存、状态管理和实时更新等功能。当你在浏览器中刷新页面时,Apollo Client 的缓存会被重置,导致之前缓存的数据变为未定义。
Apollo Client 主要有以下几种类型:
当浏览器刷新页面时,Apollo Client 的缓存会被重置,导致之前缓存的数据变为未定义。这是因为 Apollo Client 的缓存是基于内存的,刷新页面会导致内存中的缓存丢失。
apollo3-cache-persist
)将缓存数据存储在本地存储(如 localStorage 或 sessionStorage)中,这样即使页面刷新,缓存数据也不会丢失。import { ApolloClient, InMemoryCache } from '@apollo/client';
import { persistCache, AsyncStorageWrapper } from 'apollo3-cache-persist';
const cache = new InMemoryCache();
persistCache({
cache,
storage: new AsyncStorageWrapper(window.localStorage),
});
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache,
});
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const GET_USER = gql`
query GetUser {
user @client {
name
email
}
}
`;
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
user: {
read() {
return {
name: 'John Doe',
email: 'john.doe@example.com',
};
},
},
},
},
},
}),
});
import { useQuery } from '@apollo/client';
import { GET_USER } from './queries';
function UserComponent() {
const { loading, error, data } = useQuery(GET_USER);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>{data.user.name}</h1>
<p>{data.user.email}</p>
</div>
);
}
通过以上方法,可以有效解决在浏览器刷新页面时数据变为未定义的问题。
领取专属 10元无门槛券
手把手带您无忧上云