javascript - 如何使用Apollo 查询 Prop 变化？

Question

目前我有一个 BooksList 组件，当单击标题时，我将 Prop 传递给我的 BooksDetails 组件。如何使用 Apollo Hook 仅查询 Prop 更改？

我不确定如何使用钩子(Hook)来做到这一点。我已经浏览了 Apollo 的 UseQuery 文档。我找不到有关 UseLazyQuery 的文档。

我尝试了以下方法，但它总是返回未定义:

const { loading, error, data } = useQuery(getBookQuery, {
    options: (props) => {
      return {
        variables: {
          id: props.bookId
        }
      }
    }
  })

书单:

const BookList = () => {
  const {loading, error, data} = useQuery(getBooksQuery)
  const [selectedId, setId] = useState('');


  return (
    <div id='main'>
      <ul id='book-list'>
        {data && data.books.map(book => (
          <li onClick={() => setId(book.id)} key={book.id}>{book.name}</li>
        )) }
      </ul>
      <BookDetails bookId={selectedId} />
    </div>
  );
};

export default BookList;

图书详情:

const BookDetails = (props) => {

  const { loading, error, data } = useQuery(getBookQuery, {
    options: (props) => {
      return {
        variables: {
          id: props.bookId
        }
      }
    }
  })

  console.log(data)
  return (
    <div id='book-details'>
      <p>Output Book Details here</p>
    </div>
  );
};

export default BookDetails;

编辑 - 我忘了补充说我的 GetBookQuery 有一个 ID 参数，所以一个例子是 getBookQuery(123) .

Answer 1

使用 useLazyQuery像这样:

  const [getBook, { loading, error, data }] = useLazyQuery(getBooksQuery);

完整示例:

import React from 'react';
import { useLazyQuery } from '@apollo/react-hooks';

const BookList = () => {
    const [getBook, { loading, error, data }] = useLazyQuery(getBooksQuery);

  return (
    <div id='main'>
      <ul id='book-list'>
        {data && data.books.map(book => (
          <li onClick={() => getBook({ variables: { id: book.id } })}} key={book.id}>{book.name}</li>
        )) }
      </ul>
      <BookDetails data={data} />
    </div>
  );
};

export default BookList;

示例和文档可以在 Apollo 的 GraphQL 文档中找到
https://www.apollographql.com/docs/react/data/queries/