Рубрики
Без рубрики

Введение к мутациям в графике: что они есть и как их использовать

Этот пост блога – это продолжение моего предыдущего сообщения в блоге на основах GraphQL. Нажмите здесь, чтобы проверить пост основы GraphQL. Необходимо прочитать пост основы GraphQL, чтобы максимально использовать эту статью. Что такое мутация в graphql? Всякий раз, когда вы хотите

Автор оригинала: Aditya Sridhar.

Этот пост блога – это продолжение моего предыдущего сообщения в блоге на основах GraphQL. Нажмите здесь Чтобы проверить пост основы GraphQL.

Необходимо прочитать пост основы GraphQL, чтобы максимально использовать эту статью.

Что такое мутация в graphql?

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

Как разные мутации и запрос?

Запрос Используется, когда вы хотите прочитать некоторые данные с сервера. Мутация Используется, когда вы хотите написать данные обратно на сервер.

Но ждать. Я не могу пойти в Resolver в Запрос И сделать операцию записи?

Хотя можно сделать операцию записи в Запрос это не должно быть сделано. Необходимо отделить чтение операций записи и, следовательно, Мутации необходимы.

Код

Нажмите здесь Чтобы получить код из моего предыдущего поста в блоге. Мы будем добавлять логику мутации в этот код в этой статье.

Добавить мутацию фильма

Давайте создадим мутацию, которую можно использовать для добавления нового фильма.

Создайте новый файл под названием Мутация.js Отказ Скопируйте следующий код в Мутация.js :

const { GraphQLObjectType
} = require('graphql');
const _ = require('lodash');

const {movieType} = require('./types.js');
const {inputMovieType} = require('./inputtypes.js');
let {movies} = require('./data.js');

const mutationType = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addMovie: {
            type: movieType,
            args: {
                input: { type: inputMovieType }
            },
            resolve: function (source, args) {

                let movie = {
                    id: args.input.id, 
                    name: args.input.name, 
                    year: args.input.year, 
                    directorId: args.input.directorId};

                movies.push(movie);

                return _.find(movies, { id: args.input.id });
            }
        }
    }
});

exports.mutationType = mutationType;

Вы заметите, что мутация выглядит очень похоже на запрос. Основное отличие состоит в том, что имя Graphqlobjecttype это Мутация Отказ

Здесь мы добавили мутацию, называемую как addmovie который имеет возвратный тип movietype ( Movietype был покрыт в предыдущий Блог).

В ARGS мы упоминаем, что нам нужен параметр под названием вход который имеет тип Inputmovietype.

Так что же Inputmovietype здесь?

Входные типы

Возможно, что множественные мутации нуждаются в одних и тех же входных аргументах. Так что это хорошая практика для создания Типы ввода И повторно используйте входные типы для всех этих мутаций.

Здесь мы создаем тип ввода для фильма под названием Inputmovietype Отказ

Мы можем видеть, что Inputmovietype, в свою очередь, приходит от inputtepes.js файл. Давайте создадим это сейчас.

Создайте новый файл под названием inputtypes.js.

Скопируйте следующий код в Inputtypes.js:

const {
    GraphQLInputObjectType,
    GraphQLID,
    GraphQLString,
    GraphQLInt
} = require('graphql');

inputMovieType = new GraphQLInputObjectType({
    name: 'MovieInput',
    fields: {
        id: { type: GraphQLID },
        name: { type: GraphQLString },
        year: { type: GraphQLInt },
        directorId: { type: GraphQLID }

    }
});

exports.inputMovieType = inputMovieType;

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

Разрешить функцию мутации

Функция разрешения мутации – это то, где происходит фактическая операция записи.

В реальном применении это может быть операция записи базы данных.

Для этого примера мы просто добавляем данные в массив фильмов, а затем вернуть дополнительный фильм обратно.

resolve: function (source, args) {

                let movie = {
                    id: args.input.id, 
                    name: args.input.name, 
                    year: args.input.year, 
                    directorId: args.input.directorId};

                movies.push(movie);

                return _.find(movies, { id: args.input.id });
            }

Приведенный выше код в решении выполняет следующие действия:

  • Получает параметры ввода фильма из вход аргумент
  • Добавляет новый фильм на массив фильмов
  • Возвращает новый фильм, который был добавлен, выбрав его из массива фильмов

Добавить режиссер мутации

Создать мутацию, которая может быть использована для добавления нового режиссера.

Это было бы таким же, как добавление мутации фильма.

inputtepes.js С помощью монализации директора добавлено:

const {
    GraphQLInputObjectType,
    GraphQLID,
    GraphQLString,
    GraphQLInt
} = require('graphql');

inputMovieType = new GraphQLInputObjectType({
    name: 'MovieInput',
    fields: {
        id: { type: GraphQLID },
        name: { type: GraphQLString },
        year: { type: GraphQLInt },
        directorId: { type: GraphQLID }

    }
});

inputDirectorType = new GraphQLInputObjectType({
    name: 'DirectorInput',
    fields: {
        id: { type: GraphQLID },
        name: { type: GraphQLString },
        age: { type: GraphQLInt }

    }
});

exports.inputMovieType = inputMovieType;
exports.inputDirectorType = inputDirectorType;

Мутация.js После добавления Addirector Мутация:

const { GraphQLObjectType
} = require('graphql');
const _ = require('lodash');

const {movieType,directorType} = require('./types.js');
const {inputMovieType,inputDirectorType} = require('./inputtypes.js');
let {movies,directors} = require('./data.js');

const mutationType = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addMovie: {
            type: movieType,
            args: {
                input: { type: inputMovieType }
            },
            resolve: function (source, args) {

                let movie = {
                    id: args.input.id, 
                    name: args.input.name, 
                    year: args.input.year, 
                    directorId: args.input.directorId};

                movies.push(movie);

                return _.find(movies, { id: args.input.id });
            }
        },
        addDirector: {
            type: directorType,
            args: {
                input: { type: inputDirectorType }
            },
            resolve: function (source, args) {
                let director = {
                    id: args.input.id, 
                    name: args.input.name, 
                    age: args.input.age};

                directors.push(director);

                return _.find(directors, { id: args.input.id });
            }
        }
    }
});

exports.mutationType = mutationType;

Включение мутаций

До сих пор мы определили конечные точки мутации и их функциональные возможности. Но мы еще не позволили мутациям еще.

Чтобы включить их, мутации должны быть добавлены в схему.

Мутация добавляется с использованием следующего кода в server.js :

// Define the Schema
const schema = new GraphQLSchema(
    { 
        query: queryType,
        mutation: mutationType 
    }
);

Полный код в 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');
const {mutationType} = require('./mutation.js');

//setting up the port number and express app
const port = 5000;
const app = express();

 // Define the Schema
const schema = new GraphQLSchema(
    { 
        query: queryType,
        mutation: mutationType 
    }
);

//Setup the nodejs GraphQL server 
app.use('/graphql', graphqlHTTP({
    schema: schema,
    graphiql: true,
}));

app.listen(port);
console.log(`GraphQL Server Running at localhost:${port}`);

Код

Полный код для этой статьи можно найти в Это Git Reppo Отказ

Тестирование конечных точек мутации

Запустите приложение, используя следующую команду:

node server.js

Откройте свой веб-браузер и перейдите к следующему URL localhost: 5000/graphql

Тест Addmovie Mutation конечная точка

Вход:

mutation {
	addMovie(input: {id: 4,name: "Movie 4", year: 2020,directorId:4}){
    id,
    name,
	year,
    directorId
  }
  
}

Выход:

{
  "data": {
    "addMovie": {
      "id": "4",
      "name": "Movie 4",
      "year": 2020,
      "directorId": "4"
    }
  }
}

Вход:

mutation {
	addMovie(input: {id: 5,name: "Movie 5", year: 2021,directorId:4}){
    id,
    name,
	year,
    directorId
  }
  
}

Выход:

{
  "data": {
    "addMovie": {
      "id": "5",
      "name": "Movie 5",
      "year": 2021,
      "directorId": "4"
    }
  }
}

Испытание Adddirector Мутационная конечная точка

Вход:

mutation {
	addDirector(input: {id: 4,name: "Director 4", age: 30}){
    id,
    name,
	age,
    movies{
      id,
      name,
      year
    }
  }
  
}

Выход:

{
  "data": {
    "addDirector": {
      "id": "4",
      "name": "Director 4",
      "age": 30,
      "movies": [
        {
          "id": "4",
          "name": "Movie 4",
          "year": 2020
        },
        {
          "id": "5",
          "name": "Movie 5",
          "year": 2021
        }
      ]
    }
  }
}

Поздравляю ?

Теперь вы знаете о мутациях в graphql!

Вы можете проверить Документация Чтобы узнать больше о GraphQL.

Об авторе

Я люблю технологии и следую на достижениях в этой области.

Не стесняйтесь связаться со мной на моей учетной записи LinkedIn https://www.linkedin.com/in/aditya1811/

Вы также можете следовать за мной в Twitter https://twitter.com/adityaSridhar18.

Мой сайт: https://adityasridhar.com/

Читать дальше моих статей в моем блоге на adityasridhar.com Отказ

Читайте ещё по теме: