• Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular

1. 이 라이브러리는 왜 만들었을까?

• Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences.

2. 보일러플레이트 코드를 줄여주는 효과

const Page() => {
	const [isLoading, setIsLoading] = useState(false);
	const [isError, setIsError] = useState(false);
	const [data, setData] = useState<SomeData | null>(null);
	
	useEffect(() => {
		const fetchDataAsync = async () => {
      try {
        setIsLoading(true);
        const fetchedData = await fetchData();
        setData(fetchedData);
        setIsError(false);
      } catch (e) {
        setIsError(true);
      } finally {
        setIsLoading(false);
      }
    };

    fetchDataAsync();
	}, []);
	
	if (isLoading) return <Loading />;
	if (isError) return <Error />;
	return <div>{data}</div>
}

const Page() => {
	const { data, isLoading, isError } = useQuery(['key'], fetchData);
	
	if (isLoading) return <Loading />;
	if (isError) return <Error />;
	return <div>{data}</div>
}

3. 쿼리와 뮤테이션을 통한 비동기 상태 관리 방식

리액트 쿼리는 query-core 라는 패키지에서 직접 QueryCache 라는 클래스를 만들어 캐시 관리를 합니다. (해당 파일을 보시면 캐시 관리 로직을 확인해보실 수 있습니다.)

리액트 쿼리의 캐시는 리액트 쿼리에서 직접 만든 자바스크립트의 객체입니다. 이 QueryCache 객체가 캐시 데이터를 저장, 수정, 삭제를 수행하고, 필요한 경우 백엔드 데이터를 직접 호출해서 데이터를 주는 대신 캐시에 저장되어있던 데이터를 꺼내줍니다.

리액트 쿼리의 비동기 캐시 데이터는 여러가지 상태를 가집니다.

1. inactive
현재 컴포넌트에서 데이터를 사용하지 않는 상태

2. fresh
백엔드의 데이터와 일치되었다고 여겨지는 상태

3. stale
캐시된 꽤 시간이 지나서 백엔드에서 데이터를 검증해보고 싶은 상태, 이 상태에서는 Stale-While-Revalidate 작업을 수행합니다.

4. fetching
데이터 로딩 상태

 

Stale-While-Revalidate 는 백엔드에 요청 시 캐시된 데이터는 먼저 제공하되, 백엔드에 직접 요청도 같이 해서 캐시 데이터가 백엔드 데이터와 같은지 확인 작업을 하게 됩니다.

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient({
			  defaultOptions: {
			    queries: {
			      refetchOnWindowFocus: false,
			      refetchOnMount: false,
			      retry: false,
			    },
			  },
			})

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  // Mutations
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

render(<App />, document.getElementById('root'))

• 그렇다면 사용자는 어떻게 리액트 쿼리의 비동기 상태 관리 데이터에 접근해 사용할 수 있을까요?

// A list of todos
useQuery({ queryKey: ['todos'], ... })

// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })

useQuery({ queryKey: ['todos'], queryFn: fetchAllTodos })
useQuery({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
useQuery({
  queryKey: ['todos', todoId],
  queryFn: async () => {
    const data = await fetchTodoById(todoId)
    return data
  },
})
useQuery({
  queryKey: ['todos', todoId],
  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
})

1. queryKey 와 queryFn 은 항상 짝으로 다니게 됩니다.

2. queryKey 에는 변수가 들어갈 수 있으며, 이는 queryFn 이 인자를 가질 때 이 인자값이 queryKey 안의 변수 값이 되도록 합니다.

3. queryKey 하나당 queryFn 의 return 하는 data 값이 일대일대응됩니다.

export const centerQueries = createQueryKeys('centers', {
  list: (option: 'bookmark' | 'new_setting' | 'newly_registered') => ({
    queryKey: [option],
    queryFn: () => getCenterList(option),
  }),
});

// usage:
export const useGetCenterList = (
  option: 'bookmark' | 'new_setting' | 'newly_registered'
) => {
  return useQuery({
    ...centerQueries.list(option),
    enabled: Boolean(option),
  });
};

import { queryOptions } from '@tanstack/react-query'

function groupOptions(id: number) {
  return queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    staleTime: 5 * 1000,
  })
}

// usage:

useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
  queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

• 캐시 데이터를 수정하거나 할 수 없을까요?

// Invalidate every query in the cache
queryClient.invalidateQueries()
// Invalidate every query with a key that starts with `todos`
queryClient.invalidateQueries({ queryKey: ['todos'] })

• 그렇다면 리액트 쿼리를 통해 백엔드 데이터를 변경하는 방법은 무엇일까요?

function App() {
  const { isPending, isError, isSuccess, mutate } = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  })

  return (
    <div>
      {isPending ? (
        'Adding todo...'
      ) : (
        <>
          {isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}

function App() {
	const { data } = useQuery({ queryKey: ['/todos'], queryFn: getTodoList });
  const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
    onSuccess: () => {
	    queryClient.invalidateQueries({ queryKey: ['/todos'] });
    },
  })

  return (
    <div>
      {mutation.isPending ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
      <div>
	      {data.map(renderTodo)}
      </div>
    </div>
  )
}

4. 웹 클라이언트에서의 상태 관리 분류

5. Good case vs Bad case

1. queryKey 사용 케이스

• Bad Case

const { data } = await axios.get<Pagination<UserHistoryResponse>>(
    `/users/history`,
    {
      params: {
        page: pageParm,
      },
    }
  );
  
// queryKey
const queryKey = ['usersHistory'];

• Good Case

const { data } = await axios.get<Pagination<UserHistoryResponse>>(
    `/users/history`,
    {
      params: {
        page: pageParm,
      },
    }
  );
  
// queryKey
const queryKey = ['users', 'history'];

1. useQuery 를 커스텀훅으로 감싸서 사용하던 것

• Bad Case

export const useGetGroups = (id: numbe) => {
  return useQuery({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
	  enabled: Boolean(id),
	});
};

export const useGetGroups = (id: number, options?: UseQueryOption<...>) => {
  return useQuery({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    enabled: Boolean(id),
    ...options
  });
};

• Good Case

import { queryOptions } from '@tanstack/react-query'

export function getGroupOptions(id: number, options?: UseQueryOption) {
  return queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    staleTime: 5 * 1000,
    ...options
  })
}

// usage:

useQuery(getGroupOptions(1))
useSuspenseQuery(getGroupOptions(5))
useQueries({
  queries: [getGroupOptions(1), getGroupOptions(2)],
})
queryClient.prefetchQuery(getGroupOptions(23))
queryClient.setQueryData(getGroupOptions(42).queryKey, newGroups)

6. 결론