TIL ; react-query : Data transformation

subject

fetching 한 데이터의 형태를 원하는 구조로 변환할 수 있다. useQuery의 options에서 select를 사용한다.

code

const fetcher = async () => {
    const res = await axios.get("http://localhost:3001/todos");
    return res.data;
  };

  const { data, isLoading, isFetching } = useQuery("allTodos", fetcher, {
    select: (data) => {
      const result = data.map((todo: any) => todo.title);
      return result;
    },
  });


if (isLoading || isFetching) return <div>loading</div>;
  console.log(data);
  return (
    <>
      {data?.map((todo: any) => (
        <div key={todo.id}>{todo}</div>
      ))}
    </>
  );

fetcher를 통해서 받은 data는 [{id: number, title : string, content : string}] 타입을 가진 collection이다. select를 사용하면 data의 형식을 [title, title..] 과 같은 형식으로 변경 할 수 있다. 그래서 jsx 부분에서는 변환된 data를 사용할 수 있다.