Apollo Client本地状态 - 已登录查询
创始人
2024-09-09 01:31:32
0

在Apollo Client中,可以使用Apollo Link State库来管理本地状态。以下是一个示例解决方法,用于在已登录查询时管理本地状态:

  1. 首先,安装必要的依赖项:
npm install apollo-link apollo-link-state apollo-cache-inmemory graphql-tag
  1. 创建一个本地状态的GraphQL查询:
// localState.graphql
import gql from 'graphql-tag';

export const GET_LOGIN_STATUS = gql`
  query GetLoginStatus {
    isLoggedIn @client
  }
`;

export const SET_LOGIN_STATUS = gql`
  mutation SetLoginStatus($isLoggedIn: Boolean!) {
    setLoginStatus(isLoggedIn: $isLoggedIn) @client
  }
`;
  1. 创建一个本地状态的resolvers配置文件:
// resolvers.js
import { GET_LOGIN_STATUS, SET_LOGIN_STATUS } from './localState.graphql';

export const resolvers = {
  Query: {
    isLoggedIn: (_root, _args, { cache }) => {
      const { isLoggedIn } = cache.readQuery({ query: GET_LOGIN_STATUS });
      return isLoggedIn;
    },
  },
  Mutation: {
    setLoginStatus: (_root, { isLoggedIn }, { cache }) => {
      cache.writeQuery({
        query: GET_LOGIN_STATUS,
        data: { isLoggedIn },
      });
      return null;
    },
  },
};
  1. 创建一个Apollo Client实例并将本地状态resolvers配置添加到Apollo Link中:
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { resolvers } from './resolvers';

const cache = new InMemoryCache();

const stateLink = withClientState({
  cache,
  resolvers,
});

const httpLink = new HttpLink({
  uri: 'http://your-graphql-endpoint',
});

const client = new ApolloClient({
  cache,
  link: ApolloLink.from([stateLink, httpLink]),
});
  1. 在组件中使用本地状态查询和突变:
import React from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { GET_LOGIN_STATUS, SET_LOGIN_STATUS } from './localState.graphql';

const MyComponent = () => {
  const { data } = useQuery(GET_LOGIN_STATUS);
  const [setLoginStatus] = useMutation(SET_LOGIN_STATUS);

  const handleLogin = () => {
    setLoginStatus({ variables: { isLoggedIn: true } });
  };

  const handleLogout = () => {
    setLoginStatus({ variables: { isLoggedIn: false } });
  };

  return (
    
{data.isLoggedIn ? ( ) : ( )}
); }; export default MyComponent;

以上示例展示了如何使用Apollo Client的本地状态来管理已登录查询。通过使用Apollo Link State和本地状态查询和突变,可以轻松地管理和更新本地状态。

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...