React Query и React Context
Одной из лучших особенностей React Query является то, что можно использовать запрос в любом месте дерева компонентов. Если запрос уже был выполнен и результат закэширован, то вернутся закэшированные данные. Если запрос еще не был выполнен, то React Query запросит данные и вернет их.
Доминик Дорфмайстер в своем блоге разобрал пример использования React Query вместе с React Context. Например, есть компонент <ProductTable>, который использует хук useCurrentUserQuery для получения информации о пользователе. Внутри есть компонент UserNameDisplay, который отображает имя пользователя и рендерится, только если пользователь существует. Если не использовать проп-дриллинг, а только React Query, то в компоненте UserNameDisplay переменная data из хука useCurrentUserQuery со стороны TypeScript будет обозначаться как потенциальная undefined. Но мы знаем, что она не undefined и хотим использовать ее без ненулевого оператора утверждения.
Для решения данной проблемы можно использовать контекст, в котором будут переложены значения из React Query. В этом случае при использовании контекста будет явно видно, что запрос о пользователе был выполнен и данные уже существуют.
const CurrentUserContext = React.CreateContext<User | null>(null)
export const useCurrentUserContext = () => {
const currentUser = React.useContext(CurrentUserContext)
if (!currentUser) {
throw new Error('CurrentUserContext: No value provided')
}
return currentUser
}
export const CurrentUserContextProvider = ({
children,
}) => {
const currentUserQuery = useCurrentUserQuery()
// --snip--
return (
<CurrentUserContext.Provider value={currentUserQuery.data}>
{children}
</CurrentUserContext.Provider>
)
}
tkdodo.eu/blog/re…-context
