React Apollo Client：点击按钮时分页和获取数据

Posted 2023-02-21

【中文标题】React Apollo Client：点击按钮时分页和获取数据

【英文标题】：React Apollo Client: Pagination and fetch data on button click

【发布时间】：2021-12-12 18:28:56

【问题描述】：

我是 Apollo Client 的新手，想实现分页。我的代码如下所示：

我为此使用 RickandMorty 端点 (https://rickandmortyapi.com/graphql)

useCharacters.tsx

import  useQuery, gql  from '@apollo/client';

const GET_ALL_CHARACTERS = gql`
    query GetCharacters($page: Int) 
        characters(page: $page) 
            info 
                count
                pages
            
            results 
                id
                name
            
        
    
`;

export const useCharacters = (page: number = 1) => 
    const  data, loading, error  = useQuery(GET_ALL_CHARACTERS,  variables:  page  );

    return  data, loading, error ;
;

App.tsx

export const App = () => 
    const  data, loading, error  = useCharacters(1);

    const nextPage = () => 
      const  data, loading, error  = useCharacters(2);
    ;

    return (
        <>
            loading ? (
                <div> Loading... </div>
            ) : error ? (
                <div>Error</div>
            ) : (
            <>
                <CharacterList data=data.characters.results />
                <div onClick=nextPage> Next </div>
            </>
    );
;

第一次正确获取数据，但我想在第 2 页上单击Next 按钮时获取新数据。

我知道我不能在这样的方法中调用 useQuery()，因为不能在块内调用钩子，而且 data、error 和 loading 将无法在外部访问。

我该如何解决这个问题？我尝试用谷歌搜索它，但找不到与此相关的任何帮助。

【问题讨论】：

你会使用 fetchMore。阿波罗分页文档apollographql.com/docs/react/v2/data/pagination。提示 - 将您的加载/错误检查移到他们自己的返回中 - 它更容易消化。如果（错误）返回错误；如果（加载）返回加载；返回 (>)

感谢@SeanW。我去看看

【参考方案1】：

这可能有助于其他刚接触 Apollo Client 的开发人员并节省他们的时间。

fetchMore() 可用于 Apollo Client 的分页。

useCharacters.tsx

export const useCharacters = (page: number = 1, name: string = '') => 
    const  data, loading, error, fetchMore  = useQuery(GET_ALL_CHARACTERS, 
        variables:  page, name ,
        notifyOnNetworkStatusChange: true,   // to show loader
    );

    return  data, loading, error, fetchMore ;  // returning fetchMore
;

App.tsx

export const App = () => 
    const  data, loading, error, fetchMore  = useCharacters(1);

    const nextPage = () => 
      /* You can call the returned fetchMore() here and pass the next page number. 
         updateQuery() simply updates your data to the newly fetched records otherwise return previous records
      */
      fetchMore(
            variables: 
                page: 2,
            ,
            updateQuery: (prev,  fetchMoreResult ) => 
                if (!fetchMoreResult) return prev;
                return fetchMoreResult;
            ,
        );
    ;

    return (
        <>
            loading ? (
                <div> Loading... </div>
            ) : error ? (
                <div>Error</div>
            ) : (
            <>
                <CharacterList data=data.characters.results />
                <div onClick=nextPage> Next </div>
            </>
    );
;