Главная страницаКатегория graphqlСообщения в реальном времени с React, GraphQL (urql и OneGraph)

Сообщения в реальном времени с React, GraphQL (urql и OneGraph)

Name: Сообщения в реальном времени с React, GraphQL (urql и OneGraph)
Price: 12.5 USD
Rating: 5 (2 reviews)

React Real-Time Messaging with GraphQL using urql and OneGraph

egghead

★5 (всего оценок - 2)

Продолжительность

1 ч 11 мин

Категория

GraphQL

Количество уроков

20 Видео

Дата добавления

28 мар. 2021 г., 21:01

Язык

Английский

Дата обновления

29 апр. 2026 г., 09:45

Освойте работу с функциями реального времени в React‑приложениях с помощью GraphQL, подписок, мутаций и современного клиента urql. Этот курс поможет вам перейти от базовых запросов GraphQL к созданию полноценного чат‑приложения, использующего GitHub Issues как backend.

Что вы изучите в этом курсе

Курс подробно разбирает практическое применение возможностей GraphQL, выходя далеко за рамки стандартных запросов. Вы научитесь использовать инструменты, которые упрощают работу с данными и аутентификацией, а также поймёте, как внедрять взаимодействие в реальном времени в ваши проекты.

Работа с мутациями и подписками

Мутации и подписки позволяют добавлять новые данные и автоматически получать обновления без перезагрузки страницы. Вы увидите, как эти механизмы помогают создавать быстрые и отзывчивые интерфейсы.

Использование urql и OneGraph

Инструменты, применяемые в курсе, дают мощный набор возможностей:

OneGraph предоставляет единую GraphQL‑конечную точку для доступа к данным из GitHub, Stripe, Airtable и других сервисов, а также берет на себя сложность аутентификации.
urql от Formidable Labs — лёгкий клиент GraphQL с удобными React‑хуками, служащий гибкой альтернативой Apollo и Relay.

Проект: чат‑приложение на основе GitHub Issues

На протяжении курса вы создадите полноценное приложение чата, работающее в реальном времени. Оно будет использовать GitHub Issues как источник данных, а GraphQL — как универсальный интерфейс взаимодействия.

Ключевые этапы разработки

Инициализация проекта на базе Create React App.
Работа с переменными в запросах GraphQL.
Использование React‑хуков urql для запросов, мутаций и подписок.
Настройка аутентификации через React Context.
Добавление подписок GraphQL для обработки обновлений в реальном времени.

Практическая отладка и разбор ошибок

Важная часть курса — разбор типичных ошибок, которые возникают при работе с GraphQL и интеграцией разных сервисов. Инструктор показывает, как диагностировать проблемы, какие инструменты использовать и как быстро находить решение.

Итог

Этот курс идеально подходит тем, кто хочет вывести свои навыки работы с GraphQL и React на новый уровень, научиться создавать приложения с обновлениями в реальном времени и глубже понять современные инструменты интеграции API.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:10
Query Multiple Services with OneGraph GraphiQL Editor
Урок 2. 00:04:24
Query Multiple Services with urqls GraphQL Client in React
Урок 3. 00:01:15
Refactor Commonly Used Variables Into a Utils File to Be Shared Across Our React App
Урок 4. 00:04:42
Write an Authenticated GraphQL Query in OneGraph
Урок 5. 00:00:40
Install and Create an OneGraph Authentication Object Within a React Application
Урок 6. 00:02:21
Create an AuthProvider Component for Our React Application to Use Through React Context
Урок 7. 00:02:42
Wrap Our React Application in an AuthProvider Component
Урок 8. 00:04:26
Query Github Comments with OneGraph through urql's Client in React
Урок 9. 00:01:11
Pass Authorization Headers to Our Requests in React Through urql's fetchOptions
Урок 10. 00:01:47
Display GraphQL Data with a React Component
Урок 11. 00:03:37
Style a React List Component
Урок 12. 00:03:46
Use a GraphQL Mutation to Create a Github Issue Comment
Урок 13. 00:07:29
Use urqls useMutation to Create Github Issues in a React App
Урок 14. 00:07:30
Style a React Input Component with CSS-in-JS
Урок 15. 00:01:46
Write a GraphQL Subscription Query in the Graphiql Editor
Урок 16. 00:03:13
Extract a React View Component From a CommentQuery Component
Урок 17. 00:05:46
Write a Subscription GraphQL Query in React with urql
Урок 18. 00:03:23
Reduce a GraphQL Subscription Stream into a Collection with urql
Урок 19. 00:02:49
Display GraphQL Subscription Results in a React UI
Урок 20. 00:07:56
Use a GraphQL Query and Subscription Together to Fetch the History and Current Comments