React apollo 从缓存中获取数据答案

【问题标题】：React apollo taking data from cacheReact apollo 从缓存中获取数据
【发布时间】：2020-10-22 22:15:20
【问题描述】：

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

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

我的问题

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

所以这件事现在很麻烦。

我在做这个

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

});

【问题讨论】：

如果您需要对外部（数据库、其他用户/客户端）数据更改做出反应，您可以使用轮询或订阅 - 仅获取“仅网络”或“无缓存”策略是不够的。跨度>

标签： reactjs graphql react-apollo

【解决方案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()

【讨论】：

这个 watchQuery 有什么作用？
React 组件使用了 Apollo Client 的 watchQuery 功能。使用组件时设置 defaultOptions

【解决方案2】：

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

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

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

【讨论】：

这个useLazyQuery是做什么的，我用的是useQuery和useMutation
@dheerajkumar 必要时请求数据，例如<button onClick={fecth}>Fetch</button>。
useQuery 在第一次渲染时请求数据，而不是在点击时。如何使用它来请求点击数据？
我通过管理状态来做，现在在钩子中会使用这个。
嘿，我尝试使用这个惰性查询很好，但问题是当我单击按钮并运行该获取时，我想要获取数据，所以我最初在页面加载时安慰数据，它显示未定义以及何时我点击它说数据，这是正确的方式吗？

【解决方案3】：

您可以将“no-cache”设置为一个额外的选项，以便在您实例化客户端时传递。

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

【讨论】：