Лекція 284: Створення першого запиту в GraphQL

Сьогодні ми зробимо крок уперед і створимо наш перший GraphQL-запит. Рука на мишці, стакан кави поруч — починаємо!

Створення першого запиту в GraphQL

GraphQL-запити — це спосіб отримати дані з сервера. На відміну від REST, де кожен endpoint повертає фіксований набір даних, у GraphQL ти сам описуєш структуру відповіді. Наприклад, уяви, що тобі потрібен список користувачів, але тільки їхні імена та email'и. GraphQL дозволяє запитати лише ці поля, що робить твій API більш гнучким.

1. Приклад запиту GraphQL

query {
  users {
    name
    email
  }
}

Сервер поверне тільки ці дані:

{
  "data": {
    "users": [
      { "name": "Іван", "email": "ivan@example.com" },
      { "name": "Анна", "email": "anna@example.com" }
    ]
  }
}

2. Визначення схеми GraphQL

Щоб сервер розумів, які поля йому потрібно опрацьовувати, необхідно створити схему GraphQL. Схема визначає:

• Які запити (queries) підтримуються.
• Які дані повертаються.
• Які типи даних існують.

Приклад схеми GraphQL

Створи файл schema.graphqls у папці src/main/resources/graphql/. У цьому файлі вкажи схему:

type Query {
    hello: String
    users: [User!]!
}

type User {
    id: ID!
    name: String!
    email: String!
}

• Query — спеціальний тип, який описує всі підтримувані запити.
• hello — простий запит, що повертає рядок.
• users — запит, що повертає список об'єктів типу User.
• User — об'єкт, що представляє користувача.

3. Додавання даних. Реалізація Query Resolvers.

Для обробки запитів GraphQL серверу потрібні Query Resolvers. Вони описують, як отримувати дані для кожного запиту зі схеми.

Реалізація Query Resolver у Spring Boot

Створи Java-клас для обробки запитів. Наприклад, QueryResolver:

package com.example.graphql.resolver;

import org.springframework.stereotype.Component;
import com.example.graphql.model.User;

import java.util.List;

@Component
public class QueryResolver {

    // Обробник запиту "hello"
    public String hello() {
        return "Привіт, GraphQL!";
    }

    // Обробник запиту "users"
    public List<User> users() {
        return List.of(
            new User(1L, "Іван", "ivan@example.com"),
            new User(2L, "Анна", "anna@example.com")
        );
    }
}

Модель User для даних

package com.example.graphql.model;

public class User {
    private Long id;
    private String name;
    private String email;

    public User(Long id, String name, String email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    // Геттери
    public Long getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }
}

Ми створили два обробники (hello і users), які відповідають на запити з нашої схеми GraphQL.

4. Тестування першого запиту

Час перевірити, як працює наш запит! Для цього можна використати такі інструменти, як GraphQL Playground, Postman або вбудовані плагіни в IDE.

Налаштування GraphQL Playground

Додай наступну залежність у pom.xml, щоб підключити інтерфейс GraphQL Playground:

<dependency>
    <groupId>com.graphql-java-kickstart</groupId>
    <artifactId>graphql-spring-boot-starter-playground</artifactId>
    <version>11.1.0</version>
</dependency>

Запусти свій Spring Boot сервер і перейди за адресою:

http://localhost:8080/playground

Там ти зможеш виконувати запити і побачити результат.

Перевірка базового запиту

Спробуй зробити запит hello:

query {
  hello
}

Маєш отримати відповідь:

{
  "data": {
    "hello": "Привіт, GraphQL!"
  }
}

Тепер спробуй запит користувачів users:

query {
  users {
    id
    name
    email
  }
}

Результат:

{
  "data": {
    "users": [
      { "id": "1", "name": "Іван", "email": "ivan@example.com" },
      { "id": "2", "name": "Анна", "email": "anna@example.com" }
    ]
  }
}

5. Покращення структури з використанням GraphQL Resolver

Щоб зробити код більш структурованим, можна використовувати анотації @GraphQLQuery. Це дозволяє Spring автоматично зв'язувати запити GraphQL з методами Java.

Оновлений Query Resolver

package com.example.graphql.resolver;

import org.springframework.stereotype.Component;
import com.example.graphql.model.User;
import com.coxautodev.graphql.tools.GraphQLQueryResolver;

import java.util.List;

@Component
public class QueryResolver implements GraphQLQueryResolver {

    public String hello() {
        return "Привіт, GraphQL!";
    }

    public List<User> users() {
        return List.of(
            new User(1L, "Іван", "ivan@example.com"),
            new User(2L, "Анна", "anna@example.com")
        );
    }
}

Тепер Spring автоматично зв'язує методи hello і users із запитами, описаними в схемі schema.graphqls.

6. Типові помилки та їх виправлення

• Помилка "Field 'X' in type 'Query' is undefined"
  • Переконайся, що схема schema.graphqls визначена правильно і відповідає твоїм методам у QueryResolver.
• Помилка "No resolver found"
  • Перевір, що твій клас обробника анотований як @Component і доданий у контекст Spring.
• Сервер не відповідає на запити
  • Переконайся, що залежності та конфігурації GraphQL додані.

7. Практичне застосування

Тепер ти зможеш створювати потужні запити для будь-яких даних у твоєму застосунку. GraphQL-запити особливо корисні в client-server додатках, де фронтенд-розробники можуть запитувати тільки потрібні дані. Наприклад, мобільні додатки, де час передачі даних особливо критичний, виграють від використання GraphQL.

Підводячи підсумки:

1. Ти налаштував GraphQL-схему.
2. Створив Query Resolver для обробки запитів.
3. Протестував свої перші запити.

У наступній лекції познайомимося з тим, як реалізувати мутації (Mutations) для керування даними на сервері.