Автор материала, перевод которого мы публикуем сегодня, говорит, что миссия разработчиков Apollo Client заключается в том, чтобы сделать этот инструмент самым современным и удобным решением для управления состоянием React-приложений. Сообщество React развивается и осваивает новые эффективные способы разработки пользовательских интерфейсов. Создатели Apollo Client стремятся к тому, чтобы их проект поддерживал бы всё самое актуальное из мира React. Следуя этой традиции, разработчики Apollo Client представляют новую версию системы, оснащённую поддержкой хуков React.
8. Хуки были представлены в React 16. Сейчас Apollo Client включает в себя три хука, которые можно использовать в приложениях — во всех тех местах, где используются компоненты высшего порядка или механизмы render props. Это — новый механизм, позволяющий создавать компоненты, обладающие состоянием, и при этом не сталкиваться с проблемами, характерными для компонентов, основанных на классах. Эти хуки просты в освоении, они обладают множеством преимуществ перед ранее существовавшим API. Речь идёт о хуках useQuery, useMutation и useSubscription. В частности, это касается уменьшения размеров бандла приложения и сокращение объёма шаблонного кода.
Начало работы
Если вы собираетесь создать новый Apollo-проект — мы рекомендуем установить следующий пакет после того, как вы настроили свой экземпляр Apollo Client:
npm install @apollo/react-hooks
Этот пакет экспортирует компонент ApolloProvider, использующийся для подключения Apollo Client к React-приложению. По такой же схеме работа была организована и с использованием старого API.
Выбор конкретного способа зависит от того, как именно вы хотите совершить переход. Если у вас уже есть проект, в котором используется Apollo, это значит, что у вас имеется несколько способов по переходу на хуки. Подробности об этом можно найти здесь.
Почему хуки — это будущее?
Apollo Client всё ещё поддерживает API, основанные на компонентах высшего порядка и на render props. Эти API будут присутствовать в системе ещё некоторое время. Мы полагаем, что в будущем хуки окажутся наилучшим механизмом загрузки данных с помощью Apollo Client. Хотя тем, кто уже пользуется Apollo, необязательно прямо сейчас переходить на хуки, им стоит использовать хуки для новых компонентов. У этой рекомендации есть несколько причин, которые мы сейчас рассмотрим.
▍При использовании хуков нужно меньше кода, используемого для работы с данными
Хуки уменьшают объёмы шаблонного кода, используемого для работы с данными. Это ведёт к сокращению размеров компонентов и к тому, что в подобных компонентах оказывается легче разобраться. В результате разработчикам больше не понадобится вникать в то, как устроены компоненты высшего порядка, или анализировать сложную логику механизмов render props. Для загрузки данных достаточно вызывать единственную функцию useQuery:
const LAST_LAUNCH = gql` query lastLaunch }
`; export function LastLaunch() { const { loading, data } = useQuery(LAST_LAUNCH); return ( <div> <h1>Last Launch</h1> {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>} </div> );
}
Здесь показана загрузка данных с помощью хука Apollo Client useQuery
Взгляните на это учебное приложение, в котором можно увидеть работающий пример использования хуков Apollo Client.
▍Множественные мутации
Когда вы выполняете множественные мутации в одном компоненте, использование компонентов высшего порядка или механизма render props может привести к появлению кода, который сложно будет понять. Применение API render prop, построение конструкций, состоящих из вложенных друг в друга компонентов Mutation, даёт ложное ощущение структурированности кода и его чёткой иерархии. Новый хук useMutation позволяет полностью обойти эту проблему. Дело в том, что его использование сводится к простому вызову функции. В следующем примере показано то, как несколько мутаций и запросов могут друг с другом взаимодействовать. Всё это происходит в пределах одного и того же компонента:
function Message() { const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE); const [deleteMessage] = useMutation(DELETE_MESSAGE); const { data } = useQuery(GET_MESSAGE); return ( <div> <p> {loading ? 'Loading ...' : `Message: ${data && data.message ? data.message.content : ''}`} </p> <p> <button onClick={() => saveMessage()}>Save</button> <button onClick={() => deleteMessage()}>Delete</button> </p> </div> );
}
Здесь используется хук useMutation. Увидеть множественные мутации в действии можно здесь. Это приложение-пример, кроме того, содержит похожий компонент, созданный с помощью render props. Это даёт вам возможность сравнить данный компонент с тем, который создан с использованием хуков.
▍Улучшенная поддержка TypeScript
Ни для кого не секрет то, что мы — большие фанаты TypeScript. Возможности новых хуков отлично сочетаются с автоматическими определениями типов, генерируемыми с помощью Apollo CLI. Это значительно облегчает написание типобезопасного кода React-компонентов. Вот как выглядит загрузка данных с использованием хука useQuery и TypeScript:
import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql` query getRocketInventory($year: Int!) { rocketInventory(year: $year) { id year } }
`; export function RocketInventoryList() { const { loading, data } = useQuery<RocketData, RocketVars>( GET_ROCKET_INVENTORY, { variables: { year: 2019 } } ); return (/* ... show data ... */);
}
Хуки Apollo и TypeScript облегчают разработку строго типизированных компонентов React.
Дополнительные улучшения Apollo Client для React-разработчиков
Хотя в этом релизе Apollo основное внимание уделяется новым хукам, мы можем рассказать и о ещё некоторых интересных новых возможностях.
▍Уменьшение размеров бандла на 50%
В то время как размер минифицированного и сжатого gzip пакета react-apollo@2 составляет 10.6 Кб, размер пакета react-apollo@3 оказывается равным лишь 7.8 Кб. Более того, если вам достаточно пакета @apollo/react-hooks, то размер бандла уменьшается до всего 5.1 Кб. Это даёт 50% экономию по сравнению с react-apollo@2.
▍Отложенное выполнение запросов
Хук useQuery выполняет свой запрос в момент вызова функции. Но именно такое поведение системы нужно не всегда. Представьте себе, например, поле для ввода поискового запроса, выдающее пользователю подсказки. Вам может понадобиться вывести компонент с таким полем, готовым принять то, что введёт пользователь. Но при этом выполнение запроса к поисковому серверу будет отложено до того момента, когда пользователь начнём что-то в поле вводить. Для реализации подобного сценария можно воспользоваться хуком useLazyQuery, который возвращает кортеж с функцией execute во второй позиции:
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
Запрос не будет выполнен до тех пор, пока вы не вызовете функцию execute. В этот момент компонент повторно отрендерится и будет применена обычная схема выполнения запросов, реализуемая с помощью useQuery.
▍Новая документация по API
Мы обновили документацию по Apollo Client, добавив туда сведения о хуках. Именно их мы рекомендуем использовать тем, кто только начал работу с нашей системой. Правда, несмотря на это, мы не убирали из документации сведения о том, как работать с компонентами высшего порядка и с механизмом render props. В примерах кода, которые можно найти в документации, теперь можно воспользоваться новым выпадающим меню, позволяющим переключаться между кодом, демонстрирующим решение одной и той же задачи с использованием подхода, который больше всего нравится читателю.
Различные варианты кода, доступные в документации
Итоги
Создатели Apollo Client говорят, что в React им больше всего нравится то, что основная команда разработчиков этой библиотеки и сложившееся вокруг неё сообщество энтузиастов постоянно стремятся к улучшению удобства работы с React с точки зрения программиста. Появление хуков, попробовать которые рекомендуется абсолютно всем, представляет собой один из ярких примеров подобного стремления.
Надеемся, что хуки React, появившиеся в Apollo Client, понравятся тем, кто применяет этот проект при разработке своих приложений.
Уважаемые читатели! Пользуетесь ли вы Apollo Client?
