gpt4 book ai didi

apollo-client - 写入缓存时 Apollo 客户端链接状态 "Missing field in {}"?

转载 作者:行者123 更新时间:2023-12-04 02:11:28 26 4
gpt4 key购买 nike

我使用 Apollo Client、Graphcool 和 React。我有一个可用的登录表单,但我需要在用户登录时更新 UI,我需要在不同的组件中进行更新。

似乎 apollo-link-state 是解决方案。我下面的代码似乎有效,但我收到此错误:
Missing field CurrentUserIsLoggedIn in {}writeToStore.js
我的 Apollo 客户端设置:

import React from 'react';
import ReactDOM from 'react-dom';

// Apollo
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, split } from 'apollo-link';
import { withClientState } from 'apollo-link-state';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';

// Components
import LoginTest from './components/App/LoginTest';

const wsLink = new WebSocketLink({
uri: `wss://subscriptions.graph.cool/v1/XXX`,
options: {
reconnect: true,
},
});

// __SIMPLE_API_ENDPOINT__ looks like: 'https://api.graph.cool/simple/v1/__SERVICE_ID__'
const httpLink = new HttpLink({
uri: 'https://api.graph.cool/simple/v1/XXX',
});

// auth
const middlewareAuthLink = new ApolloLink((operation, forward) => {
const token = localStorage.getItem('auth-token');
const authorizationHeader = token ? `Bearer ${token}` : null;
operation.setContext({
headers: {
authorization: authorizationHeader,
},
});
return forward(operation);
});

const cache = new InMemoryCache();

const defaultState = {
CurrentUserIsLoggedIn: {
__typename: 'CurrentUserIsLoggedIn',
value: false,
},
};

const stateLink = withClientState({
cache,
defaults: defaultState,
resolvers: {
Mutation: {
CurrentUserIsLoggedIn: (_, args) => {
const data = {
CurrentUserIsLoggedIn: {
__typename: 'CurrentUserIsLoggedIn',
value: args.value,
},
};
cache.writeData({ data });
},
},
},
});

const client = new ApolloClient({
cache,
link: ApolloLink.from([
stateLink,
middlewareAuthLink,

split(
// split based on operation type
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httpLink,
),
]),
});

ReactDOM.render(
<ApolloProvider client={client}>
<LoginTest />
</ApolloProvider>,
document.getElementById('root'),
);

登录测试.js:
import React from 'react';

import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';

import App from './App';

const LoginTest = props => {
if (props.LoginServerQuery.loading) return <p>Loading...</p>;

// If the server tells us the user is logged in
if (props.LoginServerQuery.loggedInUser) {
// Then set the local logged in state to true
props.CurrentUserIsLoggedInMutation({
variables: {
value: true,
},
});
}

return <App />;
};

const CurrentUserIsLoggedInMutation = gql`
mutation CurrentUserIsLoggedInMutation($value: Boolean) {
CurrentUserIsLoggedIn(value: $value) @client {
value
}
}
`;

const LoginServerQuery = gql`
query LoginServerQuery {
loggedInUser {
id
}
}
`;

const LoginTestQuery = compose(
graphql(LoginServerQuery, { name: 'LoginServerQuery' }),
graphql(CurrentUserIsLoggedInMutation, {
name: 'CurrentUserIsLoggedInMutation',
}),
)(LoginTest);

export default LoginTestQuery;

enter image description here

最佳答案

目前,apollo-link-state 要求您返回 任何 导致您的解析器功能。可以是null也是。 This might be changed in the future .

关于apollo-client - 写入缓存时 Apollo 客户端链接状态 "Missing field in {}"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48500217/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com