React-Query useQuery 사용법

React-Qquery의 useQuery의 기본적인 사용법에 대해 직접 적용해보면서 쓴 방법들에 대해 작성해보겠다. 

현재 새로진행중인 프로젝트에서 React-Query를 적용시켜보고 싶어서 처음 api 연동 페이지가 필요한 페이지에서 테스트를 해 보았다.  

 

 

 

 

interface Geo {
    lat: string;
    lng: string;
}

interface Address {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: Geo;
}

interface Company {
    name: string;
    catchPhrase: string;
    bs: string;
}

interface User {
    id: number;
    name: string;
    username: string;
    email: string;
    address: Address;
    phone: string;
    website: string;
    company: Company;
}

const AdvertiseFilter = () => {

    const [advertiseFilterStatus, setAdvertiseFilterStatus] = useRecoilState(advertiseStatusFilterAtom);
    const [advertiseTempName, setAdvertiseTempName] = useState<string | undefined>(undefined);
    const [advertiseName, setAdvertiseName] = useRecoilState(advertiseNameAtom);


    const getUsers = async (): Promise<User[]> => {
        const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
        return data;
    };

    const useUsers = () => {
        return useQuery<User[], Error>(
            ['users'],  // queryKey로 unique 해야함
            getUsers, // 비동기 데이터 호출 함수  
            {
                onSuccess: (response) => {
                    console.log('success =', response);
                },
                onError: (error) => {
                    console.error('onError ->', error.message);
                },
                staleTime: 10 * 60 * 1000, // 데이터 유효시간 관련 옵션
            }
        );
    };

	const { data: users, isLoading, isError, error, refetch } = useUsers();

    const handleChange = (value: string) => {
        setAdvertiseFilterStatus(value);
    };

    const handleInputChange = (value: string) => {
        setAdvertiseTempName(value);
    }

    const onClickSearch = () => {
        setAdvertiseName(advertiseTempName)
        
    }





    return (
        <div className={'flex items-center mt-6'}>
            <Select
                defaultValue={advertiseFilterStatus}
                style={{width: 140, marginRight: '2rem'}}
                onChange={handleChange}
                options={[
                    {value: 'all', label: '상태'},
                    {value: 'on', label: '활성'},
                    {value: 'off', label: '비활성'},
                ]}
            />

            <Input placeholder="광고주명" prefix={<UserOutlined/>} style={{maxWidth: '200px', height: '30px', marginRight:'2rem'}}
                   onChange={(e: any) => handleInputChange(e.value)}/>

            <Button onClick={onClickSearch} type={'primary'}>검색</Button>
        </div>
    )
}

 

 

해당 인터페이스 타입은 jsonPlaceHolder users를 호출했을 때 떨어지는 response들에 대한 정의이며 

 

실제 사용법을 보면 간단하다.

 

1. api 호출 함수 

2. queryKey 생성

3. 필요한 옵션들 추가

4. 라이브러리 규칙에 맞게 세팅

 

    const getUsers = async (): Promise<User[]> => {
        const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
        return data;
    };

    const useUsers = () => {
        return useQuery<User[], Error>(
            ['users'],  // queryKey로 unique 해야함
            getUsers, // 비동기 데이터 호출 함수  
            {
                onSuccess: (response) => {
                    console.log('success =', response);
                },
                onError: (error) => {
                    console.error('onError ->', error.message);
                },
                staleTime: 10 * 60 * 1000, // 데이터 유효시간 관련 옵션
            }
        );
    };
    
    const { data: users, isLoading, isError, error, refetch } = useUsers();

 

 

 

추가적으로 인자를 전달해서 api 요청을 해야 할 때 

 

 

const getUsers = async (name?:string): Promise<User[]> => {
        const { data } = await axios.get('https://jsonplaceholder.typicode.com/users', {
            params:{
                name:name,
                data:'123'
            }
        });
        return data;
    };

    const useUsers = (name?:string) => {
        return useQuery<User[], Error>(
            ['users', name],
            () => getUsers(name),
            {
                onSuccess: (response) => {
                    console.log('success =', response);
                },
                onError: (error) => {
                    console.error('onError ->', error.message);
                },
                staleTime: 10 * 60 * 1000,
            }
        );
    };
    
    const { data: users, isLoading, isError, error, refetch } = useUsers('James');

 

 

이런식으로 하면 되겠다.

 

1. queryKey에 함께 인자 정의

2. api 호출 함수에 전달 및 사용

 

예시를 위해 아무 문자열이나 넣어서 사용해보았는데 만약 인자로 전달 할 값이 상태값으로 관리 되어지고 있으면 첫 번쨰 방식에서 상태값 조건처리를 통해 api 요청 함수 부분만 수정해서 사용해도 된다. 

 

 

다음에 useMutation 사용해야 될 때 한번 더 정리 할 예정이다.