Question

我是apollo客户端/ graphql的新手，无法让服务器结果缓存正常工作。我正在使用@ apollo / client3。我在同一页面上有两个组件，从中调用相同的查询getAllMachinesAndLocations，但是我在网络面板中看到两个到服务器的POST，且查询完全相同。（一个来自每个组件，如果我注释掉一个，那么我只会得到一个POST）。根据我的阅读，我认为它应该在发送新请求之前先在默认情况下查找缓存，甚至将fetchPolicy显式设置为“ cache-first”，我仍然遇到这个问题（尽管我知道这应该是默认设置））。设置apollo客户端时，我将这些选项保留为默认设置。

我正在使用的查询：


export const GET_MACHINES_AND_LOCATIONS = gql`
  query getAllMachinesAndLocations($tenantId: ID!) {
    allMachines(tenantId: $tenantId) {
      uuid
      name
    }
    allLocations(tenantId: $tenantId) {
      uuid
      name
    }
  }
`;

我要将这个文件导入到我的两个组件中，

import {GET_MACHINES_AND_LOCATIONS} from "App/operations/queries/getAllMachinesAndLocations";

然后像这样使用它：

const {data, loading, error} = useQuery(GET_MACHINES_AND_LOCATIONS, { fetchPolicy: "cache-first"});

我的app.js具有：


const httpLink = createHttpLink({
  uri: '/graphql',
  credentials: 'same-origin',
}) 

const middlewareLink = new ApolloLink((operation, forward) => {
  operation.variables['tenantId'] = "asdf";
  return forward(operation);
});

const link = middlewareLink.concat(httpLink);

const client = new ApolloClient({ link, cache, typeDefs, resolvers });

ReactDOM.render((
  <ApolloProvider client={client}>
    <Provider store={store}>
      <Router history={history} routes={routes} />
    </Provider>
  </ApolloProvider>
), document.getElementById('root'));

（（我已经“继承”了一些需要转换的redux内容，这就是为什么我既有apollo也有redux的原因）

无法完全弄清楚出了什么问题-非常感谢您的帮助。

编辑以添加：刚意识到，如果我同时向两个useQuery语句发送{variables：{tenantId：'abcd'}}，则它只会按预期发送一个请求。不幸的是，tenantId是我必须在每个查询中发送的东西，因此我真的希望避免这种情况（这就是为什么我在apollo链接中添加了它）。我不认为这是造成它的阿波罗链接，当我拥有或删除该代码时，它没有任何作用。仅发送空的{variables {}}也不起作用。有没有人看到这一点，并就如何克服提出建议？

Apollo客户端未按预期缓存查询（在React中使用）

0 个答案: