Question

我正在使用Web应用程序，以使用React-apollo-graphql来获取数据，因此我的UI上有两个按钮来获取两个数据，因此，当我单击一个按钮时，我正在获取一些数据，对于按钮2。

但是当我再次单击button1时，它正在从缓存中获取数据，我知道这对于快速UI更新/渲染是最好的。

我的问题

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

所以这令人困扰的事情很多。

我这样做

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

}）;

Answer 1

要全局禁用缓存并仅依赖网络数据-

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()

Answer 2

您可以更改fetch policy，最好分别针对每个请求进行更改，但可以针对整个应用程序进行全局更改

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

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

Answer 3

您可以将“ no-cache”设置为在实例化客户端时通过的附加选项。

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

反应阿波罗从缓存中获取数据

3 个答案: