🚀 Розкриття потенціалу GraphQL API з Node.js: від основ до магії в реальному часі!

APIs (API) — це основа сучасних додатків, і хоча REST добре виконував свою роль, настав час прийняти наступну еволюцію: GraphQL. Уявіть, що ви запитуєте ваш API, як на шведському столі — обираєте саме те, що вам потрібно, і залишаєте все інше. Ось у чому магія GraphQL.

У цьому посібнику ми навчимося:

1. Налаштувати сервер GraphQL за допомогою Apollo Server або Express-GraphQL.
2. Оптимізувати запити та вирішити страшну проблему N+1 за допомогою DataLoader.
3. Додати трохи функціональності в реальному часі за допомогою GraphQL Subscriptions.

До кінця цього посібника ви будете готові використовувати всю потужність GraphQL як професіонал. 🎉

🤔 Що таке GraphQL?

GraphQL — це мова запитів для API та середовище виконання цих запитів. Замість кількох кінцевих точок, у GraphQL є одна кінцева точка, яка може обробляти всі ваші запити.

Ключові особливості:

• Запитуйте те, що вам потрібно: більше ніяких недоотриманих або надмірно отриманих даних.
• Одна кінцева точка: лише /graphql вам буде достатньо.
• Розробка на основі схеми: Строго типізовані схеми забезпечують ясність.
• Підтримка реального часу: вбудована підтримка підписок.

🎬 Налаштування сервера GraphQL

Давайте розпочнемо з налаштування базового сервера GraphQL.

Варіант 1: Використання Apollo Server

Встановіть залежності:

npm install @apollo/server graphql

Налаштування сервера:

const { ApolloServer } = require('@apollo/server');  
const { startStandaloneServer } = require('@apollo/server/standalone');  

const typeDefs = `  
 type Query {  
 hello: String  
 user(id: ID!): User  
 }  
 type User {  
 id: ID!  
 name: String!  
 age: Int!  
 }  
`;  
const resolvers = {  
 Query: {  
 hello: () => 'Hello, GraphQL!',  
 user: (_, { id }) => ({ id, name: 'John Doe', age: 28 }),  
 },  
};  
const server = new ApolloServer({ typeDefs, resolvers });  
startStandaloneServer(server, { listen: { port: 4000 } })  
 .then(({ url }) => console.log(`🚀 Server ready at ${url}`));

Відкрийте http://localhost:4000 і досліджуйте playground GraphQL. Спробуйте запит, наприклад:

query {  
 hello  
 user(id: 1) {  
 name  
 age  
 }  
}

Варіант 2: Використання Express-GraphQL

Якщо ви вже використовуєте Express, express-graphql — це чудовий варіант.

Встановіть його:

npm install express express-graphql graphql

Налаштуйте сервер:

const express = require('express');  
const { graphqlHTTP } = require('express-graphql');  
const { buildSchema } = require('graphql');  

const schema = buildSchema(`  
 type Query {  
 hello: String  
 user(id: ID!): User  
 }  
 type User {  
 id: ID!  
 name: String!  
 age: Int!  
 }  
`);  
const root = {  
 hello: () => 'Hello, GraphQL!',  
 user: ({ id }) => ({ id, name: 'John Doe', age: 28 }),  
};  
const app = express();  
app.use('/graphql', graphqlHTTP({ schema, rootValue: root, graphiql: true }));  
app.listen(4000, () => console.log('🚀 Server running on http://localhost:4000/graphql'));

⚡ Оптимізація запитів за допомогою DataLoader

Проблема N+1 — це пастка продуктивності, коли сервер робить один запит для основного ресурсу та додаткові запити для пов’язаних даних.
Наприклад:

query {  
 users {  
 id  
 posts {  
 title  
 }  
 }  
}

Без оптимізації, отримання постів для кожного користувача може призвести до десятків запитів.

Зустрічайте DataLoader

DataLoader об'єднує та кешує ваші виклики до бази даних, щоб уникнути цієї безладу.

Встановіть його:

npm install dataloader

Використовуйте його ось так:

const DataLoader = require('dataloader');  
const fakeDB = {  
 users: [  
 { id: '1', name: 'Alice' },  
 { id: '2', name: 'Bob' },  
 ],  
 posts: [  
 { id: '1', userId: '1', title: 'GraphQL Rocks!' },  
 { id: '2', userId: '1', title: 'How to Use DataLoader' },  
 { id: '3', userId: '2', title: 'Scaling Node.js Apps' },  
 ],  
};  

const postLoader = new DataLoader((userIds) => {  
 console.log('Batching posts for users:', userIds);  
 return Promise.resolve(  
 userIds.map((userId) =>  
 fakeDB.posts.filter((post) => post.userId === userId)  
 )  
 );  
});  
const resolvers = {  
 Query: {  
 user: (_, { id }) => fakeDB.users.find((user) => user.id === id),  
 },  
 User: {  
 posts: (parent) => postLoader.load(parent.id),  
 },  
};

Тепер postLoader буде об'єднувати запити для постів, зменшуючи кількість викликів до бази даних до мінімуму. Ефективність розблоковано! 🚀

🔥 Реальний час у GraphQL з підписками

GraphQL — це не лише для запитів і мутацій — він може обробляти оновлення в реальному часі за допомогою підписок. Підписки використовують WebSockets, щоб підтримувати клієнтів у курсі.

Ось як додати підписки за допомогою Apollo Server:

Встановіть підтримку WebSocket:

npm install graphql-ws

Налаштування сервера:

const { ApolloServer } = require('@apollo/server');  
const { WebSocketServer } = require('ws');  
const { useServer } = require('graphql-ws/lib/use/ws');  

const typeDefs = `  
 type Query {  
 _: String  
 }  
 type Subscription {  
 messageSent: String!  
 }  
`;  
const resolvers = {  
 Subscription: {  
 messageSent: {  
 subscribe: (_, __, { pubsub }) => pubsub.asyncIterator(['MESSAGE_SENT']),  
 },  
 },  
};  
const pubsub = new (require('graphql-subscriptions').PubSub)();  
const server = new ApolloServer({ typeDefs, resolvers, context: { pubsub } });  
const wsServer = new WebSocketServer({ port: 5000 });  
useServer({ schema: server.schema, execute: server.execute, subscribe: server.subscribe }, wsServer);  
console.log('Subscriptions ready on ws://localhost:5000');

Тепер ви можете транслювати події до підключених клієнтів в реальному часі. 🎉

🥳 Варіанти використання GraphQL

• Електронна комерція: Оновлення складу в реальному часі.
• Соціальні мережі: Отримання профілів користувачів, коментарів та лайків в одному запиті.
• Інструменти для співпраці: Живі оновлення для документів або дошок.
• Аналіз даних: Панелі інструментів з гнучкими запитами та оновленнями в реальному часі.

🎯 Підсумок

GraphQL — це справжня революція для створення сучасних API. Завдяки таким можливостям, як гнучкі запити, підписки в реальному часі та оптимізація продуктивності за допомогою таких інструментів, як DataLoader, складно не помітити його потужність.

Незалежно від того, чи створюєте ви просте API, чи складну систему в реальному часі, GraphQL з Node.js справиться з усім. Тож візьміть свій улюблений редактор, розгорніть сервер і почніть подорож з GraphQL вже сьогодні! 🚀

Сподобався цей посібник? Аплодуйте 👏, діліться та коментуйте нижче! Давайте збережемо магію GraphQL живою. ✨

Перекладено з: 🚀 Unlocking the Power of GraphQL APIs with Node.js: From Basics to Real-Time Magic!