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

Question

我试图通过 React 了解 Apollo。如何将状态添加到我本地的 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 Client - Basic Operations

这里是解释如何 写 直接缓存:
Apollo Client - writeQuery and writeFragment

二、这些适用于多种场景。但是 您可能真正想要的 是用 HOC 包装您的组件，该 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