在使用Apollo Client进行状态管理时，有两种常见的方法：缓存和反应式变量。

Apollo Client缓存是通过将GraphQL查询结果存储在本地缓存中来实现的。这使得可以在多个页面或组件中，方便地共享和访问相同的数据。例如，如果在一个组件中查询了一个用户信息，那么在另一个组件中查询同样的用户信息时，Apollo Client可以直接从缓存中获取，而不需要再次发起HTTP请求。

而反应式变量则是一种类似于React Hooks中的useState()的变量。它们可以用来存储组件中的局部状态，而不必将其保存在Apollo Client缓存中。如果您只需要在组件中使用特定的局部状态，则在使用Apollo Client缓存时使用反应式变量更加方便。

下面是一个使用Apollo Client缓存和反应式变量的示例：

使用Apollo Client缓存：

import { useQuery } from '@apollo/client'; import { gql } from '@apollo/client';

const GET_USERS = gql query GetUsers { users { id name } };

function UsersComponent() { const { loading, error, data } = useQuery(GET_USERS);

if (loading) return

Loading...

Error :(

return (

{data.users.map(user => (
• {user.name}
))}

使用反应式变量：

import { useReactiveVar } from '@apollo/client'; import { makeVar } from '@apollo/client';

const isLoggedInVar = makeVar(false);

function LoginComponent() { const isLoggedIn = useReactiveVar(isLoggedInVar);

if (!isLoggedIn) { return (

return