Создание базового query для получения данных

Основы написания GraphQL-запросов

В отличие от традиционного REST API, где вы отправляете запросы к конкретным эндпоинтам, в GraphQL вы отправляете запросы на один эндпоинт, например /graphql. Сам запрос определяет, какие данные вы хотите получить. Никаких больше лишних данных — только то, что необходимо!

Вот так выглядит типичный GraphQL-запрос:

query {
  users {
    id
    name
    email
  }
}

• query — ключевое слово для обозначения запроса (по умолчанию можно опустить).
• users — это поле, запрашивающее список пользователей на сервере.
• Внутри {} перечислены конкретные поля, которые мы хотим получить для каждого пользователя: id, name и email.

Почему это круто?

Представьте, что API — это ресторан, GraphQL — ваше меню, а сервер — это шеф-повар. Вы хотите заказать пасту без соуса, но добавить сыр? Запрос GraphQL позволяет вам попросить именно это!

Тестирование GraphQL-запросов

Перед тем как использовать запросы в коде, вы можете протестировать их в таких инструментах, как GraphiQL или Apollo Studio. Эти инструменты позволяют вводить запросы, отправлять их на сервер и получать мгновенные ответы.

Реализация запросов в React с Apollo Client

Теперь, когда вы знаете, как выглядят запросы, давайте интегрируем их в наше приложение. Используем useQuery — хук от Apollo Client. Он позволяет удобно подключать запросы GraphQL к вашему React-компоненту.

Шаг 1: Напишем GraphQL-запрос

Создадим GraphQL-запрос для получения списка пользователей. Мы будем работать с тестовым GraphQL-сервером с URL https://graphqlplaceholder.typicode.com.

query GetUsers {
  users {
    id
    name
    email
  }
}

Теперь вы можете сохранить запрос в JavaScript-файл с использованием библиотеки graphql-tag:

// queries.ts
import { gql } from '@apollo/client';

export const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

Шаг 2: Используем запрос в React-компоненте

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

import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_USERS } from './queries';

const UsersList: React.FC = () => {
  // Хук useQuery выполняет запрос к серверу
  const { loading, error, data } = useQuery(GET_USERS);

  // Обрабатываем состояние загрузки
  if (loading) return <p>Загрузка...</p>;

  // Обрабатываем ошибку
  if (error) return <p>Ошибка: {error.message}</p>;

  // Если данные успешно получены
  return (
    <ul>
      {data.users.map((user: { id: string; name: string; email: string }) => (
        <li key={user.id}>
          {user.name} — {user.email}
        </li>
      ))}
    </ul>
  );
};

export default UsersList;

Разберем компонент по шагам:

1. Импортируем useQuery и запрос GET_USERS, чтобы выполнить запрос.
2. Вызываем useQuery внутри компонента и деструктурируем ответ:
   • loading — состояние загрузки;
   • error — ошибка, если запрос не удался;
   • data — объект с полученными данными.
3. Обрабатываем состояния: показываем сообщение во время загрузки и ошибки, если запрос провалился.
4. Если данные успешно получены, мы отображаем их в <ul>.

Пример запроса и рендеринга данных

Пример выше демонстрирует минимальный набор необходимых действий для работы с GraphQL. Если вы подключите компонент в свой главный файл, например в App.tsx, то получите список пользователей.

import React from 'react';
import UsersList from './UsersList';

const App: React.FC = () => {
  return (
    <div>
      <h1>Список пользователей</h1>
      <UsersList />
    </div>
  );
};

export default App;

Ваше приложение теперь может делать запросы к GraphQL API и отображать данные!

Типичные ошибки и их решение

Работая с запросами в GraphQL, часто возникают проблемы. Вот несколько из них и способы решения:

1. Ошибка "Network error": обычно это связано с неправильным URI или отсутствием подключения к серверу. Убедитесь, что ваш сервер запущен.

2. Пустая data: возможно, запрос некорректен. Проверьте его в инструментах тестирования (например, в GraphiQL).

3. Проблемы с CORS: если вы видите ошибку CORS, убедитесь, что сервер настроен для обработки запросов с вашего домена.

4. Отсутствие обрабатываемых состояний: всегда обрабатывайте loading и error, чтобы избежать "молчаливых" ошибок.

Применение в реальной жизни

Использование GraphQL-запросов с Apollo Client — это огромный шаг вперед в удобстве работы с данными. Вот где это может пригодиться на реальной работе:

• В проектах с часто меняющимся интерфейсом. Например, если у вас форма, где нужно подгрузить только нужные поля о пользователе.
• На собеседованиях. Знание GraphQL и умение работать с ним с помощью Apollo Client ценится среди работодателей.
• Для упрощения запросов в сложных приложениях. Вместо того чтобы компоненты запрашивали данные из нескольких API, вы можете объединить их в один запрос.

1

Задача

Модуль 3: React, 12 уровень, 2 лекция

Недоступна

Базовый запрос для получения данных

Базовый запрос для получения данных

Открыть

1

Задача

Модуль 3: React, 12 уровень, 2 лекция

Недоступна

Динамическое отображение данных

Динамическое отображение данных

Открыть