[React Native] RTK-Query 파라미터에 맞게 특정 데이터만 불러오기(Get specific data by parameter using RTK-query)

 

안녕하세요 Foma 입니다.

 

오늘은 RTK-Query에서 파라미터에 맞게 원하는 특정 데이터를 불러오는 방법에 대해 알아보려고 합니다.

 

많은 삽질을 하고 결국 해결법을 알아내게 되어 글로 정리하려고 합니다.

 

바로 시작할게요~

---

1. 첫 번째 시도

 

우선 제가 하려 했던건 유저를 이름으로 조회해서 데이터를 가져오는 것이었는데요.

 

아래와 같이 쿼리를 통해서 엔드포인트를 만들었습니다.

 

export const userAPISlice = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
  endpoints: builder => ({
    ...
    getUserByName: builder.query<User, String>({
      query: (name: string) => `/user/${name}`,
    }),
    ...

 

그리고 이와 같이 특정 이름과 함께 요청하여 유저가 있는지 없는지 체크하고, 있다면 유저 정보를 가져오려고 했었는데요.

 

 const {data:user} = useGetUserByNameQuery('이름')

 

 

Login 버튼을 눌렀을 때 현재 inputText에 적혀 있는 이름을 체크해야 했는데요.

 

그것을 구현하기 위해선 다음과 같이 구현해 줘야 했죠.

 

  const handleLogin = (name:string) => {
    const {data:user} = useGetUserByNameQuery(name)
    ...

 

하지만 위와 같이 구현했을 경우 invalid hook call 에러가 발생하게 됩니다.

 

---

2. 두 번째 시도

 

그래서 두 번째로 시도한 방법은 로그인 버튼을 눌렀을 때 이름을 저장할 confirmName state를 만들어 줬습니다.

 

쿼리의 파라미터에 해당 confirmName을 넣어줬습니다.

 

 const [confirmName, setConfirmName] = useState<string>('');
 const {data: user} = useGetUserByNameQuery(confirmName);

 

하지만 아래와 같이 confirmName을 정해주고 로그를 출력하면 바로 세팅해준 이름이 아니라 바로 그 전 값이 나왔습니다.

 

  const handleLogin = (name:string) => {
    setConfirmName(name)
    console.log(confirmName);
    ...

 

바로 바뀐 값을 확인하기 위해선 useEffect를 이용해서 확인한 뒤 로직을 작성해 주면 되었지만, 이 또한 많은 에러가 발생했습니다.

 

  useEffect(() => {
    console.log(confirmName);
  }, [confirmName]);

---

3. 세 번째 시도

 

결국 세 번째 시도 끝에 해결 방법을 알아냈는데요.

 

바로 userAPISlice를 쿼리로 받아오는 것이 아니라 mutation을 통하여 요청을 한 뒤 transformResponse 데이터를 전달하는 것이었습니다.

 

export const userAPISlice = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
  endpoints: builder => ({
	...
    getUserByName: builder.mutation({
      query: (name: string) => ({
        url: `/username/${name}`,
        method: 'GET',
      }),
      transformResponse: (response: User) => {
        return response;
      },
    }),
    ...

 

mutation을 만들어 줍니다.

 

import {useGetUserByNameMutation} from '../api/UserAPISlice';

const [login] = useGetUserByNameMutation();

 

그 다음 아래와 같이 login(원하는 이름)을 .unwrap() 메서드로 받아오면 유저의 정보가 받아와 지게 됩니다.

 

  const handleLogin = async () => {
    try {
      const user = await login(inputText).unwrap();
      ...
    } catch (err) {
      console.log(err);
    }
  };