Этот пост был первоначально опубликован в adityasridhar.com
Это в основном язык запросов для API
GraphQL показывает, какие различные типы данных, предоставленные сервером, а затем клиент может выбрать именно то, что он хочет.
Также в GraphQL вы можете получить несколько ресурсов сервера за один вызов, а не делать несколько вызовов API REST.
Вы можете проверить https://graphql.org/ для полного списка преимуществ.
Дело в том, что до тех пор, пока вы не увидите GraphQL в действии, трудно понять преимущества. Итак, давайте начнем с использования GraphQL.
В этой статье мы будем использовать GraphQL вместе с Nodejs.
Установите Nodejs из https://nodejs.org/en/
GraphQL можно использовать с несколькими языками. Здесь мы сосредоточимся на том, как мы можем использовать GraphQL с JavaScript, используя NodeJS.
Создайте папку, называемую как graphql-with nodejs Анкет Зайдите в папку проекта и запустите npm init Чтобы создать проект Nodejs. Команда для этого приведена ниже.
cd graphql-with-nodejs npm init
Установите зависимости
Установите Express, используя следующую команду
npm install express
Установите GraphQL, используя следующую команду. Мы будем устанавливать GraphQL и GraphQL для Express.
npm install express-graphql graphql
Код Nodejs
Создайте файл, называемый как Server.js Внутри проекта и скопируйте в него следующий код
const express = require('express');
const port = 5000;
const app = express();
app.get('/hello', (req,res) => {
res.send("hello");
}
);
app.listen(port);
console.log(`Server Running at localhost:${port}`);
Приведенный выше код имеет одну http get cont point, называемую /привет .
Конечная точка создается с помощью Express.
Теперь давайте изменим этот код, чтобы включить GraphQL.
Включение GraphQL в коде
GraphQL будет иметь единую конечную точку URL, называемую /graphql который будет обрабатывать все запросы.
Скопируйте следующий код в Server.js
//get all the libraries needed
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {GraphQLSchema} = require('graphql');
const {queryType} = require('./query.js');
//setting up the port number and express app
const port = 5000;
const app = express();
// Define the Schema
const schema = new GraphQLSchema({ query: queryType });
//Setup the nodejs GraphQL server
app.use('/graphql', graphqlHTTP({
schema: schema,
graphiql: true,
}));
app.listen(port);
console.log(`GraphQL Server Running at localhost:${port}`);
Позвольте нам пройти через этот код сейчас
graphqlhttp Позволяет нам настроить сервер GraphQL на /graphql URL В основном он знает, как обработать просьбу, который поступает.
Эта настройка выполнена в следующих строках кода
app.use('/graphql', graphqlHTTP({
schema: schema,
graphiql: true,
}));
Теперь давайте рассмотрим параметры внутри graphqlhttp
Graphiql
Graphiql – это веб -интерфейс, который вы можете проверить конечные точки GraphQL. Мы установим это на True, чтобы легче проверить различные конечные точки GraphQL, которые мы создаем.
схема
Хотя у GraphQL есть только одна внешняя конечная точка /graphql , это, в свою очередь, может иметь несколько других конечных точек, делающих разные вещи. Эти конечные точки будут указаны в схеме.
Схема будет делать что -то вроде:
- Укажите конечные точки
- Укажите поля ввода и вывода для конечной точки
- Укажите, какое действие должно быть предпринято, когда попадает конечная точка и так далее.
Схема определяется следующим образом в коде
const schema = new GraphQLSchema({ query: queryType });
Схема может содержать запрос а также мутация типы Эта статья будет сосредоточена только на типе запроса.
запрос
Видно из схемы, что запрос был настроен на QueryType Анкет
Мы импортируем QueryType из Query.js Файл с использованием следующей команды
const {queryType} = require('./query.js');
Query.js это пользовательский файл, который мы скоро создадим.
запрос это где мы указываем только конечные точки чтения в схеме.
Создайте файл, называемый как Query.js в проекте и скопируйте в него следующий код.
const { GraphQLObjectType,
GraphQLString
} = require('graphql');
//Define the Query
const queryType = new GraphQLObjectType({
name: 'Query',
fields: {
hello: {
type: GraphQLString,
resolve: function () {
return "Hello World";
}
}
}
});
exports.queryType = queryType;
Запрос объяснил
QueryType создается как GraphqlobjectType и с указанием названия Запрос Анкет
Поля где мы указываем различные конечные точки.
Итак, здесь мы добавляем одну конечную точку, называемую привет
Привет имеет Тип из Graphqlstring Что означает, что эта конечная точка имеет возвратный тип строки. Тип Graphqlstring вместо Строка Так как это схема графика. Таким образом, напрямую использование строки не будет работать.
разрешение Функция указывает на действие, которое должно быть выполнено, когда вызывается конечная точка. Здесь действие – вернуть строку «Hello World».
Наконец мы экспортируем QueryType, используя Exports.querytype Анкет Это должно убедиться, что мы можем импортировать его в Server.js
Запуск приложения
Запустите приложение, используя следующую команду
node server.js
Приложение работает на Localhost: 5000/graphql Анкет
Вы можете проверить приложение, перейдя в Localhost: 5000/GraphQL.
Этот URL -адрес запускает пользовательский интерфейс Graphiql Web, как показано на экране ниже.
Ввод приведен слева, а выход показан справа.
Дайте следующий вход
{
hello
}
Это даст следующий выход
{
"data": {
"hello": "Hello World"
}
}
Поздравляю 😃
Вы создали свою первую конечную точку GraphQL.
Добавление больше конечных точек
Мы создадим 2 новые конечные точки:
- Фильм : Эта конечная точка вернет фильм, учитывая удостоверение личности фильма
- директор : Эта конечная точка вернет режиссера, учитывая идентификатор директора. Это также вернет все фильмы, снятые этим режиссером.
Добавление данных
Обычно приложение читает данные из базы данных. Но для этого урока мы будем жестко кодировать данные в самом коде для простоты.
Создайте файл с именем data.js и добавьте следующий код.
//Hardcode some data for movies and directors
let movies = [{
id: 1,
name: "Movie 1",
year: 2018,
directorId: 1
},
{
id: 2,
name: "Movie 2",
year: 2017,
directorId: 1
},
{
id: 3,
name: "Movie 3",
year: 2016,
directorId: 3
}
];
let directors = [{
id: 1,
name: "Director 1",
age: 20
},
{
id: 2,
name: "Director 2",
age: 30
},
{
id: 3,
name: "Director 3",
age: 40
}
];
exports.movies = movies;
exports.directors = directors;
В этом файле есть данные и директора. Мы будем использовать данные в этом файле для наших конечных точек.
Добавление конечной точки фильма в запрос
Новые конечные точки будут добавлены в файл QueryType в файле Query.js
Код для конечной точки фильма показан ниже
movie: {
type: movieType,
args: {
id: { type: GraphQLInt }
},
resolve: function (source, args) {
return _.find(movies, { id: args.id });
}
}
Возвратный тип этой конечной точки – Movietype что мы скоро определим.
args Параметр используется для указания ввода в конечную точку фильма. Вход в эту конечную точку id который имеет тип Graphqlint
разрешение Функция возвращает фильм, соответствующий идентификатору, из списка фильмов. Найти это функция от Лодаш Библиотека использовалась для поиска элемента в списке.
Полный код для Query.js показан ниже
const { GraphQLObjectType,
GraphQLString,
GraphQLInt
} = require('graphql');
const _ = require('lodash');
const {movieType} = require('./types.js');
let {movies} = require('./data.js');
//Define the Query
const queryType = new GraphQLObjectType({
name: 'Query',
fields: {
hello: {
type: GraphQLString,
resolve: function () {
return "Hello World";
}
},
movie: {
type: movieType,
args: {
id: { type: GraphQLInt }
},
resolve: function (source, args) {
return _.find(movies, { id: args.id });
}
}
}
});
exports.queryType = queryType;
Из приведенного выше кода это можно увидеть это Movietype фактически определяется в types.js
Добавление индивидуального типа Movietype
Создайте файл, называемый как types.js Анкет
Добавьте следующий код в types.js
const {
GraphQLObjectType,
GraphQLID,
GraphQLString,
GraphQLInt
} = require('graphql');
// Define Movie Type
movieType = new GraphQLObjectType({
name: 'Movie',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString },
year: { type: GraphQLInt },
directorId: { type: GraphQLID }
}
});
exports.movieType = movieType;
Это можно увидеть это Movietype создан как GraphqlobjectType
У него 4 поля ID, имя, год и директор Анкет Типы для каждой из этих полей также указаны при добавлении их.
Эти поля поступают непосредственно из данных. В этом случае это будет от Фильмы список.
Добавление запроса и типа для конечной точки директора
Подобно фильму, даже конечная точка режиссера может быть добавлена.
В Query.js , конечная точка директора можно добавить следующим образом
director: {
type: directorType,
args: {
id: { type: GraphQLInt }
},
resolve: function (source, args) {
return _.find(directors, { id: args.id });
}
}
Directortype можно добавить следующим образом в types.js
//Define Director Type
directorType = new GraphQLObjectType({
name: 'Director',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString },
age: { type: GraphQLInt },
movies: {
type: new GraphQLList(movieType),
resolve(source, args) {
return _.filter(movies, { directorId: source.id });
}
}
}
});
Подождите минуту. Тип директора немного отличается от Movietype Анкет Почему это?
Почему внутри Directortype Анкет Ранее мы видели, что функции разрешения присутствовали только в запрос
Специальность Directortype
Когда Директор Конечная точка называется «Мы должны вернуть детали режиссера, а также все фильмы, которые руководил режиссером.
Первые 3 поля ID, имя, возраст в Directortype являются простыми и поступают непосредственно из данных ( Директора
Четвертое поле Фильмы Нужно сдержать список фильмов этим режиссером.
Для этого мы упоминаем, что тип Фильмы Поле – это Graphqllist of Movietype (Список фильмов)
Но как именно найдет все фильмы, снятые этим режиссером?
Для этого у нас есть разрешение Функция внутри поля фильмов. Входные данные этой функции разрешения – Источник и args Анкет
Источник будет иметь детали родительского объекта.
Допустим, поля id и для директора. затем Source.id и
Таким образом, в этом примере функция Resolve выясняет все фильмы, где DirectorID соответствует идентификатору требуемого директора.
Весь код для этого приложения доступен в этом GitHub Repo
Теперь давайте протестируем приложение для разных сценариев.
Запустите приложение, используя Node Server.js
Перейти к Localhost: 5000/graphql и попробуйте следующие входы.
кино
Вход:
{
movie(id: 1) {
name
}
}
Выход:
{
"data": {
"movie": {
"name": "Movie 1"
}
}
}
Из вышесказанного можно увидеть, что клиент может точно запросить то, что он хочет, и GraphQL обеспечит отправку только этих параметров. Здесь только имя Поле запрашивается, и только то, что отправляется обратно сервером.
В Фильм (ID: 1) , ID – входной параметр. Мы просим сервер отправить обратно фильм, который имеет идентификатор 1.
Вход:
{
movie(id: 3) {
name
id
year
}
}
Выход:
{
"data": {
"movie": {
"name": "Movie 3",
"id": "3",
"year": 2016
}
}
}
В приведенном выше примере Имя, удостоверение личности и год Поля запрашиваются. Таким образом, сервер отправляет все эти поля.
директор
Вход:
{
director(id: 1) {
name
id,
age
}
}
Выход:
{
"data": {
"director": {
"name": "Director 1",
"id": "1",
"age": 20
}
}
}
Вход:
{
director(id: 1) {
name
id,
age,
movies{
name,
year
}
}
}
Выход:
{
"data": {
"director": {
"name": "Director 1",
"id": "1",
"age": 20,
"movies": [
{
"name": "Movie 1",
"year": 2018
},
{
"name": "Movie 2",
"year": 2017
}
]
}
}
}
В приведенном выше примере мы видим мощность GraphQL. Мы указываем, что хотим директора с ID 1. Также мы указываем, что хотим все фильмы от этого режиссера. И режиссер, и поля фильма полностью настраиваемы, и клиент может точно запросить то, что он хочет.
Следовательно это может быть распространено на другие области и типы. Например, мы могли бы запустить запрос, подобный Найдите директора с ID 1. Для этого режиссера найдет все фильмы. Для каждого фильма найдите актеров. Для каждого актера получите 5 лучших фильмов о рейтинге и так далее. Для этого запроса нам нужно указать взаимосвязь между типами. Как только мы это сделаем, клиент может запросить любые отношения, которые он хочет.
Теперь вы знаете основные понятия GraphQL.
Вы можете проверить Документация Чтобы узнать больше о GraphQL
Не стесняйтесь общаться со мной в LinkedIn или следить за мной в Twitter.
Если вам понравился этот пост, вы можете проверить мой веб -сайт https://adityasridhar.com для других подобных сообщений
Оригинал: “https://dev.to/adityasridhar/what-is-graphql-and-how-to-use-it-1f58”