我正在尝试使用Apollo React客户端(在apollo-boost 0.4.7
下)进行客户端状态管理。
我可以从GraphQL服务器上获取消息很好,但是当我尝试读取/写入本地缓存时会出现问题(也就是说,没有服务器交互)。我已阅读到对hit the cache的查询需要使用@client指令:
// index.js - The entry point of my webpacked app
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import App from './app.jsx'; // My app component
// Initialize the cache
const cache = new InMemoryCache();
cache.writeData({
data: {
testString: '',
},
});
console.log(cache); // Let's see what the cache holds
// Build the client
const client = new ApolloClient({
uri: '/graphql',
cache,
resolvers: {
testString: (root, params, { cache }) => {
return 'Heyyyyyyy';
},
},
});
// Render the app exported by app.jsx
ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('test-app'));
我可以看到testString
字段在我的ROOT_QUERY中已初始化:
但是,当我尝试查询此testString
字段时,结果是不确定的:
// app.jsx - Inside the component
const { loading, error, data } = useQuery(gql`{ testString @client }`);
console.log(error); // undefined
console.log(data); // undefined
发生了什么事?