从客户端添加数据到Apollo？

Question

我试着用React把我的脑袋绕在阿波罗身边.如何将状态添加到我当地的Apollo商店？

我正在使用Meteor.它在客户端提供了一个功能,用于测试用户是否已登录并返回其ID(如果有)Meteor.userId().我需要在许多不同的组件中访问此状态.

这是我的客户端文件:

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 });

Answer 1

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

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

在这里阅读更多相关信息：Apollo 客户端 - 基本操作

以下是如何直接写入缓存的 说明： Apollo 客户端 - writeQuery 和 writeFragment

其次，这些适用于多种场景。但您可能真正想要的是用 HOC 包装您的组件，该组件将执行从缓存中读取的查询并将结果放在组件的props. 利用Apollo Client提供的功能就可以非常简单地完成。

您可以在这里找到很好的解释和示例：Apollo 客户端 - 查询基础知识

对于仅从本地缓存读取的查询，请使用FetchPolicy: 'cache-only' 此处阅读：Apollo 客户端 - 查询 - options.fetchPolicy

第三，对于很多场景，就像你提到的那样，上面两个应该足够了。如果您需要更多的控制来管理您当地的状态，那么就有了新的apollo-link-state。

使用它，您可以在客户端上编写自定义解析器，该解析器将直接处理本地缓存，而无需到达服务器。它允许您执行部分由服务器解决、部分由客户端解决的复杂操作。

在这里阅读更多相关信息：Apollo Link - 使用 Apollo Client 管理您的本地数据