Apollo React @client指令未返回缓存值

时间:2019-12-23 16:52:50

标签: javascript reactjs apollo

我正在尝试使用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中已初始化:

enter image description here

但是,当我尝试查询此testString字段时,结果是不确定的:

// app.jsx - Inside the component

const { loading, error, data } = useQuery(gql`{ testString @client }`);

console.log(error);  // undefined
console.log(data);  // undefined

发生了什么事?

0 个答案:

没有答案