如何使用 react-query 將來自不同 react-query 鈎子的數據同步連接在一起？

Question

我有三種不同的數據類型： Books 、 Authors和Publishers 。 我使用 react-query 來獲取每種類型的列表，即useBooks(bookIds) 、 useAuthors(authorIds) 、 usePublishers(publisherIds) ，當我嘗試獨立使用它們時，這非常有效。

但是，一本書有一個authorIds和publisherIds列表，我想將Publishers和Authors對象加入Books 。 我無法找出使用 react-query 執行此操作的正確方法。 理想情況下，我希望能夠調用所有三個鈎子，等待他們的響應，然后將其作為一個大鈎子返回。 但是，我無法做到這一點。

我嘗試過的一個實現是讓每個將數據連接到Book鈎子都依賴於前一個鈎子的結果。 這工作正常； 然而，最大的問題是連接是彼此異步完成的； 一旦數據返回，組件使用的數據就不能期望Book有Author或Publisher 。 下面是一個例子：

const usePopulatedBooks = (bookIds) => {
    const booksQuery = useBooks(bookIds);

    const {data: books} = booksQuery;

    const authorIds = [];
    const publisherIds = [];

    if (books) {
        books.forEach(book => {
            authorIds.push(book.authorId);
            authorIds.push(book.publisherIds);
        })
    }

    // Who knows when this finishes?
    const {data: authors} = useAuthors(authorIds);

    // Who knows when this finishes?
    const {data: publishers} = usePublishers(publisherIds);

    // Adds "author" and "publisher" field (if the authors/publishers array exist) to "book"
    const joinedBooks = joinData(books, authors, publishers);

    return {...booksQuery, data: joinedBooks};
}

有什么方法可以編寫上述邏輯，以便在所有數據都加入之前不會返回任何內容？ 在我的腦海中，我這樣做的方式是在另一個 react-query 鈎子的查詢函數中調用所有三個鈎子，但是鈎子規則不允許我這樣做。

Answer 1

在不知道useBooks 、 useAuthors和usePublishers鈎子內部如何工作的情況下，我無法准確回答，但我會通過編寫一個執行所有 API 調用的函數來解決這個問題，然后用useQuery包裝該單個函數。 您不想有條件地調用不同的鈎子，因為這違反了鈎子的規則之一：“不要在循環、條件或嵌套函數內調用鈎子。”

像這樣的東西：

async function getBookDetails() {
    const books = await getAllBooks();
    const authorIds = books.map(x => x.authorId);
    const authors = await getAuthorsForIds(authorIds);
    const publisherIds = books.map(x => x.publisherId);
    const publishers = await getPublishersForIds(publisherIds);
    return { books, authors, publishers };
}

然后你可以將它包裝在一個 useQuery 中，如下所示：

const result = useQuery("book-details", getBookDetails);

這假設如果任何查詢都沒有結果，您將獲得一個空數組[] ，而不是 null 或未定義。

如果您不熟悉Array.map ，可以在此處閱讀。