无法使用 useQuery 挂钩为具有一些 @client 变量的远程查询获取数据

Posted 2023-03-08

【中文标题】无法使用 useQuery 挂钩为具有一些 @client 变量的远程查询获取数据

【英文标题】：Unable to fetch data with useQuery hook for a remote query that has some @client variables

【发布时间】：2020-05-26 12:44:50

【问题描述】：

下面给出的是获取产品列表并将其存储在 apollo-client 本地缓存中的查询。它检索每个产品的products 列表和images 列表

const GET_PRODUCTS_QUERY = gql`
  query Products($cursor: String, $query: String, $imageCount: Int = 100) 
    products(first: 9, after: $cursor, query: $query) 
      edges 
        cursor
        node 
          id
          selected @client
          title
          description
          images(first: $imageCount) 
            edges 
              node 
                id
                originalSrc
                selected @client
              
            
          
        
      
    
  
`;

我有一堆products 和selected: true，每个产品都会有一个或多个images 和selected: true。

GET_PRODUCTS_QUERY 正被一个获取产品并呈现产品的ProductsList 组件使用。这工作正常。当用户选择某个产品时，selected 在本地缓存中被标记为真，ProductsList 组件重新渲染。到目前为止，一切都很好。

我有另一个组件，我需要使用相同的GET_PRODUCTS_QUERY 来获取产品，但只能从缓存中。该组件应该监听缓存中的产品列表，并且每当缓存中的某些内容发生变化时，它应该重新呈现。我尝试以下无济于事

export default () => 
  const  data: productsData =   = useQuery(GET_PRODUCTS_QUERY,  fetchPolicy: "cache-only" );
  const  selectedProducts = []  = productsData;
  //Render selected products

在初始渲染期间，查询被执行并且没有按预期返回任何内容。

在 ProductsList 获取产品列表并填充缓存后，我希望在侦听查询时调用渲染函数，但它没有发生 我通过更改其他一些道具来手动影响渲染，以便触发 useQuery。但我仍然没有从缓存中获得任何产品，尽管它在那里。

谁能解释一下我哪里出错了？

【参考方案1】：

您正在获取两个不同的查询 - 您需要确保不仅查询相同，而且传递给两个挂钩的变量也相同。

这样想。例如，当您获取 20 个产品时

products(first: 20)

Apollo 将结果存储在缓存中时对其进行规范化。每个产品都单独存储并分配一个密钥。然后products 字段与这些键相关联。但是，想象一下，如果您随后查询 21 种产品：

products(first: 21)

如果 Apollo 忽略传递给该字段的参数值，它会将其视为缓存命中，并仅返回与先前查询关联的 20 个产品。幸运的是，它不会那样做。每个键列表不仅与字段相关联，还与提供给该字段的参数相关联。如果参数发生变化，并且参数组合尚未在缓存中，则 Apollo 知道它需要从服务器获取数据。

【讨论】：

实际上我没有为变量传递任何值。所以这意味着first 在这两种情况下都是 9。 cursor 和 query 也没有通过。想知道是否与此问题有关github.com/apollographql/react-apollo/issues/3816

您确定cursor 和query 未定义吗？例如，query 最初是一个空字符串吗？

我很确定情况就是这样。我现在没有代码，因为我采用了另一种方法来为选定的产品和图像维护单独的数据结构。这对我有用。我稍后会再试一次。无论如何，上述方法是我尝试实现嵌套选择功能的正确方法吗？

像这样的嵌套字段非常适合派生字段，但在处理实际状态时有点痛苦。有几次我遇到过类似的情况，我通常将本地状态作为根，这听起来就像你最终做的那样。没有那么优雅，但更容易维护。