Question

我试着用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 });

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

从客户端添加数据到Apollo？

1 个答案: