update state, api, arch

docs/api/04-graphql.md

@@ -0,0 +1,56 @@
+---
+sidebar_position: 4
+---
+
+# GraphQL
+
+**GraphQL** — это язык запросов для API, который позволяет клиентам запрашивать только те данные, которые им нужны, и получать их в одном ответе. В сочетании с React GraphQL предоставляет мощный инструмент для управления данными в веб-приложениях, делая их более эффективными и гибкими.
+
+## Основные концепции GraphQL:
+1. **Запросы (Queries):**
+   - Клиент определяет, какие данные ему нужны, и отправляет запрос на сервер.
+```js
+query {
+  user(id: 1) {
+    name
+    email
+    posts {
+      title
+    }
+  }
+}
+```
+2. **Мутации (Mutations):**
+   - Используются для изменения данных на сервере (создание, обновление, удаление).
+```js
+mutation {
+  createUser(name: "John", email: "john@example.com") {
+    id
+    name
+  }
+}
+```
+3. **Схема (Schema):**
+   - GraphQL API описывается с помощью схемы, которая определяет типы данных и операции (запросы, мутации).
+4. **Резолверы (Resolvers):**
+   - Функции на сервере, которые выполняют запросы и возвращают данные.
+
+## Использование GraphQL с React:
+Для работы с GraphQL в React чаще всего используется библиотека Apollo Client или Relay. Apollo Client — это популярное решение, которое предоставляет инструменты для управления состоянием данных и выполнения запросов.
+
+### Основные шаги для использования GraphQL с React:
+1. **Установка Apollo Client**
+   - Установите необходимые пакеты: `npm install @apollo/client graphql`
+2. **Настройка Apollo Client:**
+   - Создайте клиент и подключите его к React-приложению: `<ApolloProvider client={client}> <App/> </ApolloProvider>`
+3. **Выполнение запросов:**
+   - Используйте хуки useQuery для выполнения запросов и useMutation для мутаций.
+4. **Кэширование данных:**
+   - Apollo Client автоматически кэширует данные, что позволяет избежать повторных запросов и улучшить производительность.
+
+## Преимущества GraphQL с React:
+- **Точные запросы:** Получайте только те данные, которые нужны.
+- **Уменьшение количества запросов:** Все данные можно получить за один запрос.
+- **Гибкость:** Легко изменять запросы без необходимости изменять API.
+- **Интеграция с состоянием:** Apollo Client интегрируется с состоянием React, что упрощает управление данными.
+