Apollo 페이지 매김 튜토리얼: fetchMore() 사용

Apollo를 사용하여 GraphQL 서버에서 많은 양의 데이터를 가져와야 할 때 페이지 매김 기능을 사용해야 할 수도 있습니다. 페이지 매김을 사용하면 데이터의 여러 "페이지"를 가져올 수 있습니다(예: 한 번에 100개).

이 튜토리얼은 React 앱에서 Apollo의 페이지 매김을 사용하는 방법을 안내합니다.

GraphQL 스키마 살펴보기

페이지 매김에 대한 접근 방식은 GraphQL 스키마에서 구조가 어떻게 구성되었는지에 전적으로 달려 있습니다. 이 게시물에서는 스키마가 다음과 같다고 가정합니다.

type PageInfo {
   hasNextPage: Boolean!
}

type Connection {
    edges: [Edge]
    nodes: [Node]
    pageInfo: PageInfo!
}

type Edge {
    cursor: String!
    node: Node
}

여기서 중요한 것은 hasNextPage 및 cursor(항목 색인) 값입니다.

Apollo의 fetchMore 기능 사용하기

Apollo의 useQuery 후크에서 가져온 데이터와 함께 fetchMore 라는 변수를 가져올 수도 있습니다.

const { data, loading, error, refetch, fetchMore } =
    useQuery(QUERY,
        {
            variables,
            fetchPolicy,
            errorPolicy: 'all',
        },
    );

fetchMore 함수를 반복적으로 호출하여 모든 데이터 페이지를 가져올 수 있습니다. 하지만 먼저, 우리는 삶을 더 쉽게 만들기 위해 몇 가지 유틸리티 함수를 만들 것입니다.

다음 페이지가 있는지 확인

데이터에는 hasNextPage 값이 포함되므로 이 값이 true 로 설정되어 있는지 확인해야 합니다.

const getHasNextPage = (data) =>
    data.pageInfo.hasNextPage;

Please note that your function may be slightly different depending on the structure of your schema!

이후 값 계산

fetchMore 를 사용할 때 가져오기를 시작할 인덱스를 알려야 합니다. after 값을 전달하여 이를 수행합니다.

99를 after 값으로 전달하면 99 이후(즉, 100 이후) 다음 배치를 가져오라고 합니다.
after 값을 계산하려면 목록에서 마지막 항목의 cursor 값을 찾아야 합니다.

const getAfter = (data) =>
    data.edges && data.edges.length > 0
        ? data.edges[data.edges.length - 1].cursor
        : null;

updateQuery 함수 만들기

마지막으로 updateQuery 함수가 필요합니다. 다음 페이지 분량의 데이터를 가져온 후에는 해당 데이터를 이미 가져온 데이터와 병합해야 합니다.

const updateQuery = (previousResult, { fetchMoreResult }) => {
    if (!fetchMoreResult) {
        return previousResult;
    }

    const previousEdges = previousResult.edges;
    const fetchMoreEdges = fetchMoreResult.edges;

    fetchMoreResult.edges = [...previousEdges, ...fetchMoreEdges];

    return { ...fetchMoreResult }
}

다른 코드 예제와 마찬가지로 GraphQL 스키마와 일치하도록 수정해야 할 수도 있습니다.
updateQuery를 생성할 때 주의해야 할 몇 가지 주요 사항이 있습니다.

반환하는 데이터의 모양은 Apollo가 기대하는 것과 정확히 일치해야 합니다. 특정 키를 수정하거나 제거하려고 하면 updateQuery가 작동하지 않습니다

.

previousResult 수정해서 반품하지 마세요! 그렇게 하면 Apollo는 변경된 사항을 인식하지 못하며 더 많은 데이터를 가져온 후 앱을 다시 렌더링하지 않습니다. fetchMoreResult 를 수정하면 이 문제를 해결할 수 있습니다.

useEffect 내에서 fetchMore 사용

이제 모든 유틸리티 기능을 얻었으므로 모두 함께 가져올 수 있습니다.

useEffect(() => {
    if (data && fetchMore) {
        const nextPage = getHasNextPage(data);
        const after = getAfter(data);

        if (nextPage && after !== null) {
            fetchMore({ updateQuery, variables: { after } });
        }
    }
}, [data, fetchMore, updateQuery]);

GraphQL 쿼리에 after 값 전달

after 의 변수 목록에 fetchMore 를 전달하고 있음을 알 수 있습니다. 또한 쿼리가 이 변수를 사용하고 있는지 확인해야 합니다.

query Data ($after: String) {
    data (after: $after) {
        pageInfo {
            hasNextPage
        }
        edges {
            cursor
            node {
              // ... data from each node here
            }
        }
    }
}

fetchMore가 구현되면 useQuery 후크의 데이터가 이제 여러 페이지 분량의 데이터를 반환합니다!

결론

그리고 그게 다야! 이 게시물이 Apollo Client에서 페이지 매김을 사용하는 방법에 대한 몇 가지 미스터리를 풀었기를 바랍니다.

아직 확인하지 않았다면 Apollo 문서의 Pagination 페이지에서 추가 정보 및 사용 사례를 확인하는 것이 좋습니다.