[React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경

안녕하세요. J4J입니다.

 

이번 포스팅은 react-query v5 변경점 알아보기 세 번째인 useQueries 기능 변경에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

이전 글

 

[React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경

[React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경

 

 

반응형

 

 

Combine 추가

 

useQueries만이 가지고 있는 변경점은 1개로 combine 기능이 추가되었습니다.

 

combine 기능은 useQueries를 통해 실행되는 여러 query들의 결과를 하나로 합쳐 1개의 query가 실행된 것과 같은 결과를 제공해 줍니다.

 

react-query 공식 문서에 따르면 combine을 활용하여 구조적으로 안정화가 될 수 있다고 얘기하고 있으며, 개인적으로 생각해 봤을 때도 useQueries를 사용할 때 combine을 활용한다면 도움이 될 것이라고 판단됩니다.

 

 

 

간단한 예시로 5버전 이전에는 비슷한 유형의 query들을 useQueries로 묶었을 때 데이터를 페이지에 보여주고자 한다면 다음과 같이 작성해 볼 수 있었습니다.

 

// prev react-query-v5
import { useQueries } from '@tanstack/react-query';
import axios from 'axios';

export default function Combine() {
    const pages = [1, 2];
    const res = useQueries({
        queries: pages.map((page) => ({
            queryKey: ['strings', 'pages', page],
            queryFn: async () =>
                (
                    await axios.get('http://localhost:8080/strings/pages', {
                        params: {
                            page,
                            limit: 2,
                        },
                    })
                ).data,
        })),
        // not use combine, html is complexible
    });

    return (
        <main>
            <div>
                <h2>Strings</h2>
                {res.map((queryRes) => (queryRes.data as string[])?.map((string) => <p key={string}>{string}</p>))}
                {res.some((queryRes) => queryRes.isFetching) && (
                    <div>
                        <h2>isFetching...</h2>
                    </div>
                )}
            </div>
        </main>
    );
}

 

 

 

위의 코드는 useQueries의 result 값들을 html에서 활용하여 페이지에 데이터들을 보여주고 있는 코드입니다.

 

그러다 보니 html 쪽 구조가 복잡해지는 느낌을 없지 않아 받을 수 있습니다.

 

 

 

 

하지만 여기서 만약 5버전 이후 등장한 combine을 활용한다면 복잡함이 조금 해소될 수 있습니다.

 

다음과 같이 useQueries에 combine option을 추가하여 최종적으로 사용할 데이터들을 구분해 주는 로직들을 추가할 수 있고 isFetching, isLoading 등 공통적으로 가지고 있는 값들을 하나로 통일해 줄 수 있습니다.

 

또한 combine을 사용했을 때 return 값에 넣지 않은 query 결과는 사용할 수 없게 변경됩니다.

 

그래서 useQueries를 통해 실질적으로 사용할 결과들에 대해서만 명확히 확인할 수 있다는 장점도 생깁니다.

 

// react-query-v5
import { useQueries } from '@tanstack/react-query';
import axios from 'axios';

export default function Combine() {
    const pages = [1, 2];
    const res = useQueries({
        queries: pages.map((page) => ({
            queryKey: ['strings', 'pages', page],
            queryFn: async () =>
                (
                    await axios.get('http://localhost:8080/strings/pages', {
                        params: {
                            page,
                            limit: 2,
                        },
                    })
                ).data,
        })),
        // not use combine, html is simple
        combine: (results) => {
            const combineStrings = results.map((result) => result.data) as string[][];
            return {
                data: combineStrings.reduce((prev, cur) => (cur ? [...prev, ...cur] : prev), []),
                isFetching: results.some((result) => result.isFetching),
            };
        },
    });

    return (
        <main>
            <div>
                <h2>Strings</h2>
                {res.data?.map((string) => <p key={string}>{string}</p>)}
                {res.isFetching && (
                    <div>
                        <h2>isFetching...</h2>
                    </div>
                )}
            </div>
        </main>
    );
}

 

 

 

 

 

 

 

 

이상으로 react-query v5 변경점 알아보기 세 번째인 useQueries 기능 변경에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.