如何在 apollo graphql reactjs 中使用 detalization 查询？

Posted 2023-03-08

【中文标题】如何在 apollo graphql reactjs 中使用 detalization 查询？

【英文标题】：How to use detalization queries in apollo graphql reactjs?

【发布时间】：2021-01-01 11:46:48

【问题描述】：

假设 data - 是来自父查询的数据。

子反应组件：

const ShowDetails = (data) => 
   const  loading, error, data_details  = useQuery(someQueryAsksAdditionalFileldsForEntryAlreadyPresentInCache);

someQueryAsksAdditionalFileldsForEntryAlreadyPresentInCache -- 询问data 中缺少的其他字段。

当(!loading && !error) data_details 将有请求的字段时。

问题：data_details 将只有请求的字段。

问题：有没有办法在 ShowDetails 中使用带有合并附加请求字段的父数据并忽略 data_details？

在 Chrome 的 Apollo devtools 的帮助下，我看到 apollo-cache 有一个来自合并的 data 和 data_details 的条目。

我不想重新获取 data 中的所有现有条目。

例子：

父组件查询：

const bookQuery = gql`
  query ($bookId: ID!) 
    book(id: $bookId) 
      id
      author
    
  
`

详情查询：

const bookEditionsQuery = gql`
  query ($bookId: ID!) 
    book(id: $bookId) 
      id
      editions 
        publisher
        year
      
    
  
`

const bookReviewQuery = gql`
  query ($bookId: ID!) 
    book(id: $bookId) 
      id
      review 
        user
        score
        date
      
    
  
`

所有这些查询都将填充 Apollo 缓存中的同一个存储桶：book 和 id。

需要实现什么：在react组件中BookDetails：

有 1 个对象：

data.author data.editions[0].year data.review[0].user

逻辑上 - 这是缓存中的一项。

感谢您的帮助。

【问题讨论】：

无需合并/从父级传递...只需使用仅缓存策略查询所有必填字段

这确实与this @xadm 一致：来自链接的引用：在触发 graphql 查询时可以使用不同的 fetch-policy。当 fetch policy 设置为 fetchPolicy: 'cache-only' 。你是说，这个抓取策略避免了任何网络请求。如果你查询的数据在缓存中不可用，就会抛出错误。

我认为cache-first 也无济于事：如果缓存缺少您要求的某些数据，Apollo 将根据查询向您的 API 发出网络请求 - 这意味着重新获取所有字段。

如果不是全部都在缓存中，那么您可以使用 onCompleted 进行合并

合并两个数据并不容易。 parent + details 这两个查询可以有特定的字段集。示例父级有： ' book author ' details_query 'book editions year' 。合并具有相同键集的两个对象并不容易。

【参考方案1】：

使用已经获取的[并从父级传递的]数据几乎没有什么可保存的......只有author......必须获取所有评论和版本，根本不使用缓存。

...通过book解析器获取review和editions有助于apollo缓存保持关系，但也需要API来使用额外的（'book'）解析器[级别]，虽然它不是必需的...审查和版本解析器应该可以直接使用书籍 ID ... 和 fe 调用可以由单独的<Review /> 子组件使用...或review 和editions 在一个请求中使用相同的id 参数调用。

只需在组件中分别使用data 和dataDetails - 避免代码复杂化，使其易于阅读：

const ShowDetails = (data) => 
   const  loading, error, data:dataDetails  = useQuery(someQueryAsksAdditionalFileldsForEntryAlreadyPresentInCache);

if(loading) return "loading...";
return (
  <div>
    <div>author: data.author</div>
    dataDetails.review.map(...

...如果你真的想加入数据

const ShowDetails = (data) => 
   const [bookData, setBookData] = useState(null);
   const  loading, error, data:dataDetails  = useQuery(someQueryAsksAdditionalFileldsForEntryAlreadyPresentInCache, 
    onCompleted: (newData) => 
        setBookData( ...data, ...newData  );
      
    );
    if(bookData) return ...
      // bookData.author
      // bookData.review.map(...