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

Question

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

子反应组件：

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

someQueryAsksAdditionalFileldsForEntryAlreadyPresentInCache -- 请求 data.

中缺少的附加字段

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

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

问题：有没有一种方法可以在 ShowDetails 中将父数据与合并的附加请求字段一起使用并忽略 data_details？

在 Apollo devtools 的帮助下，在 Chrome 中，我看到 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

逻辑上 - 这是缓存中的一个条目。

感谢您的帮助。

Answer 1

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

...通过 book 解析器获取 review 和 editions 有助于 apollo 缓存保持关系，但也需要 API 使用额外的（'book' ) 解析器 [level] 虽然不需要...评论和版本解析器应该可以直接使用书 ID 调用...和 f.e。可以由单独的 <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(...

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

How to use detalization queries in apollo graphql reactjs?

apollo

reactjs

graphql