Используем React Query вместе с React Router В React Router 6 | Заметки про React

Используем React Query вместе с React Router

В React Router 6.4 добавится концепция получения данных – loader и action, как в фреймворке Remix.
Используя проп loader можно объявить, какие данные нужно запросить для отображения роута и получить их в роут через хук useLoaderData. Для изменения данных и их инвалидации используется проп action, а вызывается он при сабмите формы. Однако, React Router не берет на себя обязанность кэширования данных, поэтому имеет смысл использовать библиотеки запросов с кэшированием, например, React Query.

Доминик Дорфмайстер рассказал, как можно объединить React Router и React Query вместе, чтобы использовать преимущества обеих библиотек. React Router вызывает loader получения данных раньше, чем компонент монтируется, а React Query умеет кэшировать данные и дает возможность использовать API запроса, например, refetchOnWindowFocus.

// src/routes/contacts.jsx
import { useQuery } from '@tanstack/react-query'
import { getContact } from '../contacts'

// define your query
const contactDetailQuery = (id) => ({
queryKey: ['contacts', 'detail', id],
queryFn: async () => getContact(id),
})

// needs access to queryClient
export const loader =
(queryClient) =>
async ({ params }) => {
const query = contactDetailQuery(params.contactId)
// return data or fetch it
return (
queryClient.getQueryData(query.queryKey) ??
(await queryClient.fetchQuery(query))
)
}

export default function Contact() {
const params = useParams()
// useQuery as per usual
const { data: contact } = useQuery(contactDetailQuery(params.contactId))
// render some jsx
}


Компонент, где объявляется роут:

const queryClient = new QueryClient()
export default function Routes() {
return (
path="contacts/:contactId"
element={}
// pass the queryClient to the route
loader={contactLoader(queryClient)}
/>
);
}


Обратите внимание на то, что loader - не хук, поэтому не может использовать хук useQueryClient для получения инстанса клиента, и его нужно прокидывать в loader вручную.
На данный момент React Router 6.4 еще находится в бете, но уже можно посмотреть на сайте документации, как будут работать новые концепции получения данных.

https://tkdodo.eu/blog/react-query-meets-react-router