В этом видео мы собираемся создать клиент GraphQL с помощью React и будем выполнять запросы GraphQL, используя Axios и React Hooks.

Давайте начнем с создания нового реагирующего приложения.

npx create-react-app react-graphql

Теперь мы собираемся установить Axios для выполнения http-запросов к нашему серверу GraphQL.

npm i --save axios

Мы собираемся запустить Nest JS GraphQL Server, который мы создали на основе предыдущего видео.

В нашем приложении React мы собираемся использовать хук useState и хук useEffect.
хук — это, по сути, способ получить доступ к состоянию и жизненному циклу компонентов React из функционального компонента.
useState hook возвращает текущее состояние компонента и функцию, которая позволит нам обновить это значение.
А хук useEffect позволит нам вызывать GraphQL API после того, как DOM или объектная модель документа компонента будут полностью визуализированы.

Более подробно вы можете посмотреть видео ниже. Спасибо!

Подведение итогов

Код, созданный для этого приложения, доступен в этом репозитории Gitlab.