2

我用 graphql 端点构建了一个 api 平台应用程序。在客户端，我使用这样的 apollo 客户端管理查询和突变（在 vuejs 前端）：

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

const httpLink = new HttpLink({
  uri: 'http://localhost:8000/api/graphql'
})

export default new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

在我的 vuex 商店中，我像这样使用它：

fetchItems({commit}, options) {
      commit(mutationsTypes.FETCHING_ITEMS);
      client.query({
        query: organismoQueries.SEARCH_ITEMS_QUERY(options),
      }).then((res) => {
        commit(mutationsTypes.FETCHING_ITEMS_SUCCESS, res.data.organismos.edges)
      }).catch(error => console.error(error));
    }

查询工作正常，问题是我无法重新加载表结果。当我使用相同的选项重新发送相同的查询时，永远不会请求 graphql 端点。我需要更改表格的排序，但是一旦达到所有组合，我就无法再次重新加载表格。

我试图在查询中引入一个随机参数，但我从服务器收到错误（显然）。

有没有办法重新发送相同的查询并执行诸如重新加载表之类的操作。

提前致谢！

4

1 回答 1

3

Apollo 客户端可以通过从服务器或缓存中获取特定查询来解析它。确切的行为由 确定fetchPolicy，可以在调用时指定client.query。从文档：

fetch 策略是一个选项，它允许你指定你希望你的组件如何与 Apollo 数据缓存交互。默认情况下，您的组件将首先尝试从缓存中读取，如果您的查询的完整数据在缓存中，那么 Apollo 只会从缓存中返回数据。如果您查询的完整数据不在缓存中，那么 Apollo 将使用您的网络接口执行您的请求。通过更改此选项，您可以更改此行为。

因为默认策略是cache-first，并且您已经获取了一次查询，所以后续调用client.query将返回缓存的结果。要绕过缓存，请选择不同的策略，例如network-only：

client.query({
  query: organismoQueries.SEARCH_ITEMS_QUERY(options),
  fetchPolicy: 'network-only',
})

您可以在 docs中阅读有关该fetchPolicy选项的更多信息。

于 2018-12-24T14:44:53.740 回答