React apollo 从缓存中获取数据

Question

我正在开发网络应用程序，以获取我正在使用的数据 React-apollo-graphql，所以我的 UI 上有两个按钮来获取两个数据，所以当我单击一个按钮时，我正在为按钮 2 获取一些数据。

但是当我再次单击按钮 1 时，它正在从缓存内存中获取数据，我知道这最适合快速 UI 更新/渲染。

我的问题

现在假设我已经更新了我的数据库中的数据，这样除非我刷新页面，否则数据不会显示在 UI 上。

所以这就是现在比较头疼的事情

我在做这个

const client = new ApolloClient({
uri:
    'my Uri',
cache: new InMemoryCache(),

});

Answer 1

您可以更改fetch policy最好为每个请求单独更改它，但您可以为整个应用程序全局更改它

const [fetch, { loading, error, data }] = useLazyQuery(QUERY, { fetchPolicy: 'network-only' });

// globally
const client = new ApolloClient({
    defaultOptions: {
        query: {
            fetchPolicy: 'network-only'
        }
    },
});

Answer 2

您可以将“无缓存”设置为实例化客户端时要传递的额外选项。

const client = new ApolloClient({
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: "no-cache" },
    query: { fetchPolicy: "no-cache" },
  },
})

Answer 3

全局禁用缓存，只依赖网络数据-

const client = new ApolloClient({
    defaultOptions: {
        query: {
            fetchPolicy: 'network-only'
        },
        watchQuery: { fetchPolicy: "no-cache" },
    },
});

这里有两种获取数据的方法，获取策略是可选的，取决于您的用例 -

1- 与 useQuery

const { data, loading, refetch } = useQuery(QUERY, { fetchPolicy: 'network-only' });

此处可以再次使用 refetch 来提取数据 - 使用简单的 refetch()

2- 与 useLazyQuery

const [getData,{ loading, data, refetch }] = useLazyQuery(QUERY, {fetchPolicy:'network-only'});

现在有了 useLazyQuery，我们可以在需要时按需触发调用 - getData()

React apollo 从缓存中获取数据

React apollo taking data from cache

reactjs

graphql

react-apollo