将数据从客户端添加到 Apollo？

Posted 2023-03-10

【中文标题】将数据从客户端添加到 Apollo？

【英文标题】：Add data from client side to Apollo?

【发布时间】：2018-06-28 20:48:30

【问题描述】：

我试图通过 React 了解 Apollo。如何将状态添加到我当地的 Apollo 商店？

我正在使用 Meteor。它在客户端提供了一个函数来测试用户是否登录，如果他们使用Meteor.userId()，则返回他们的 id。我需要在许多不同的组件中访问此状态。

这是我的客户文件：

import React from 'react';
import  Meteor  from 'meteor/meteor';
import  render  from 'react-dom';
import  ApolloProvider  from 'react-apollo';
import  ApolloLink, from  from 'apollo-link';
import  ApolloClient  from 'apollo-client';
import  HttpLink  from 'apollo-link-http';
import  InMemoryCache  from 'apollo-cache-inmemory';

import App from '../../../imports/ui/App/App';

const httpLink = new HttpLink(
    uri: Meteor.absoluteUrl('graphql'),
);

const authLink = new ApolloLink((operation, forward) => 
    const token = Accounts._storedLoginToken();
    operation.setContext(() => (
        headers: 
            'meteor-login-token': token,
        ,
    ));
    return forward(operation);
);

const cache = new InMemoryCache();

const client = new ApolloClient(
    link: from([authLink, httpLink]),
    cache,
);

const ApolloApp = () => (
    <ApolloProvider client=client>
        <App />
    </ApolloProvider>
);

Meteor.startup(() => 
    render(<ApolloApp />, document.getElementById('app'));
);

注册 API（服务器）：

import  createApolloServer  from 'meteor/apollo';
import  makeExecutableSchema  from 'graphql-tools';
import merge from 'lodash/merge';

import GroupsSchema from '../../api/groups/Groups.graphql';
import GroupsResolvers from '../../api/groups/resolvers';

import UsersSchema from '../../api/users/Users.graphql';
import UsersResolvers from '../../api/users/resolvers';

// Comment find

const typeDefs = [GroupsSchema, UsersSchema];
const resolvers = merge(GroupsResolvers);

const schema = makeExecutableSchema(
    typeDefs,
    resolvers,
);

createApolloServer( schema );

【参考方案1】：

首先，这里是文档中关于如何从缓存中读取的最简单示例：

client.query( query: gql` hello ` ).then(console.log);

在此处了解更多信息：Apollo Client - Basic Operations

这里是如何写入直接到缓存的解释： Apollo Client - writeQuery and writeFragment

其次，这些适用于多种场景。但是你可能真正想要的是用 HOC 包装你的组件，它会执行从缓存中读取的查询并将结果放在组件的 props 上。使用 Apollo Client 提供的功能非常简单。

您可以在这里找到很好的解释和示例：Apollo Client - Queries Basics

对于只读本地缓存的查询，使用FetchPolicy: 'cache-only' 在这里阅读：Apollo Client - Queries - options.fetchPolicy

第三，对于很多场景，比如你提到的那个，上面两个应该就够了。如果您需要管理本地状态的更多控制权，那么可以使用新的apollo-link-state。

有了它，您可以在客户端上编写自定义解析器，直接处理本地缓存而不访问服务器。它让您执行复杂的操作，这些操作部分由服务器解决，部分由客户端解决。

在此处了解更多信息：Apollo Link - Manage your local data with Apollo Client