2. Установка

В этом уроке поднимем полноценный стек: Apollo Server (бэкенд) + Apollo Client (React фронтенд).

Структура проекта

graphql-demo/
├── server/          # Apollo Server
│   ├── index.js
│   └── package.json
└── client/          # React + Apollo Client
    ├── src/
    │   ├── App.jsx
    │   └── main.jsx
    └── package.json

Часть 1: Apollo Server

Установка

mkdir graphql-demo && cd graphql-demo
mkdir server && cd server
npm init -y
npm install @apollo/server graphql

Минимальный сервер

server/index.js

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

// 1. Определяем схему
const typeDefs = `
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

// 2. Данные (в реальном приложении — БД)
const books = [
  { title: 'Война и мир', author: 'Лев Толстой' },
  { title: 'Преступление и наказание', author: 'Достоевский' },
];

// 3. Resolvers — функции для получения данных
const resolvers = {
  Query: {
    books: () => books,
  },
};

// 4. Запускаем сервер
const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀 Server ready at: ${url}`);

Запуск

# В package.json добавь "type": "module"
node index.js
# 🚀 Server ready at: http://localhost:4000/

Открой http://localhost:4000 — увидишь Apollo Sandbox для тестирования.

Первый запрос в Sandbox

query GetBooks {
  books {
    title
    author
  }
}

Ответ:

{
  "data": {
    "books": [
      { "title": "Война и мир", "author": "Лев Толстой" },
      { "title": "Преступление и наказание", "author": "Достоевский" }
    ]
  }
}

Часть 2: Apollo Client (React)

Установка

# В корне проекта
cd ..
npm create vite@latest client -- --template react
cd client
npm install @apollo/client graphql

Настройка клиента

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

// Создаём клиент
const client = new ApolloClient({
  uri: 'http://localhost:4000/',  // URL нашего сервера
  cache: new InMemoryCache(),     // Кэш в памяти
});

// Оборачиваем приложение в ApolloProvider
ReactDOM.createRoot(document.getElementById('root')).render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

Первый компонент с GraphQL

src/App.jsx

import { useQuery, gql } from '@apollo/client';

// Определяем запрос
const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`;

function BookList() {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return (
    <ul>
      {data.books.map((book, i) => (
        <li key={i}>
          <strong>{book.title}</strong> — {book.author}
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <div>
      <h1>Мои книги</h1>
      <BookList />
    </div>
  );
}

Запуск клиента

npm run dev
# http://localhost:5173

CORS настройка на сервере

Если клиент и сервер на разных портах — нужен CORS:

npm install cors

server/index.js

import { expressMiddleware } from '@apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';
import express from 'express';
import http from 'http';
import cors from 'cors';
import bodyParser from 'body-parser';

const app = express();
const httpServer = http.createServer(app);

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});

await server.start();

app.use(
  '/graphql',
  cors(),
  bodyParser.json(),
  expressMiddleware(server),
);

await new Promise((resolve) => httpServer.listen({ port: 4000 }, resolve));
console.log(`🚀 Server ready at http://localhost:4000/graphql`);

TypeScript версия

npm install typescript ts-node @types/node -D
npm install @apollo/server graphql

server/index.ts

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

interface Book {
  title: string;
  author: string;
}

const typeDefs = `#graphql
  type Book {
    title: String
    author: String
  }
  type Query {
    books: [Book]
  }
`;

const books: Book[] = [
  { title: 'Война и мир', author: 'Лев Толстой' },
];

const resolvers = {
  Query: {
    books: (): Book[] => books,
  },
};

const server = new ApolloServer<{}>({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
console.log(`🚀 Server ready at: ${url}`);

Практика

1. Подними минимальный Apollo Server с книгами
2. Подключи Apollo Client к React-приложению
3. Выведи список книг на странице
4. Добавь в схему новое поле year: Int и данные к нему
5. Запроси это поле в React-компоненте

Итого

• Apollo Server — GraphQL сервер на Node.js
• Apollo Client — клиент для React/Vue/Angular
• ApolloProvider оборачивает приложение и даёт доступ к клиенту
• useQuery(GQL_QUERY) — хук для запроса данных

Следующий урок → Schema Definition Language →