GraphQL中的突变简介：它们是什么以及如何使用它们

最新推荐文章于 2024-04-25 21:19:48 发布

cumian8165

最新推荐文章于 2024-04-25 21:19:48 发布

阅读量384

点赞数

文章标签： java python js javascript nodejs ViewUI

原文链接：https://www.freecodecamp.org/news/an-intro-to-mutations-in-graphql-what-they-are-and-how-to-use-them-e959735abd8d/

版权

This blog post is a continuation of my previous blog post on GraphQL Basics. Click Here to check out the GraphQL Basics post.

这篇博客文章是我之前关于GraphQL Basics的博客文章的延续。单击此处查看GraphQL基础知识帖子。

It is necessary to read the GraphQL Basics post to make the best use of this article.

有必要阅读GraphQL Basics帖子以充分利用本文。

GraphQL中的突变是什么？ (What is a mutation in GraphQL?)

Whenever you want to write data back into the server, mutations are used.

每当您要将数据写回到服务器时，都会使用突变。

变异和查询有何不同？ (How are mutation and query different?)

Query is used when you want to read some data from the server. Mutation is used when you want to write data back to the server.

当您想从服务器读取一些数据时使用查询。当您要将数据写回到服务器时，使用突变。

But wait. Can’t I go to the resolver in the query and do a write operation?

可是等等。我不能转到查询中的解析器并执行写操作吗？

Though it is possible to do a write operation in a query, it shouldn’t be done. It is necessary to separate the read the write operations, and hence mutations are needed.

尽管可以在查询中执行写操作，但不应该这样做。必须分开读和写操作，因此需要进行突变。

码 (Code)

Click Here to get the code from my previous blog post. We will be adding the mutation logic to this code in this article.

单击此处，从我以前的博客文章中获取代码。我们将在本文的代码中添加变异逻辑。

添加电影突变 (Add movie mutation)

Let us create a mutation which can be used to add a new movie.

让我们创建一个可用于添加新电影的变异。

Create a new file called mutation.js. Copy the following code into mutation.js:

创建一个名为mutation.js的新文件。将以下代码复制到mutation.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;

You will notice that a mutation looks very similar to a query. The main difference is that the name of the GraphQLObjectType is Mutation.

您会注意到，突变看起来与查询非常相似。主要区别在于GraphQLObjectType的名称为Mutation 。

Here we have added a mutation called as addMovie which has a return type of movieType ( movieType was covered in the previous blog ).

在这里，我们添加了一个名为addMovie的变量 ，该变量的返回类型为movieType ( 先前博客中介绍了movieType )。

In args, we are mentioning that we need a parameter called input which is of type inputMovieType

在args中，我们提到需要一个名为input的参数，其类型为inputMovieType。

So what is inputMovieType here?

那么，这里的inputMovieType是什么？

输入类型 (Input types)

It is possible that multiple mutations need the same input arguments. So it is a good practice to create Input Types and reuse the Input Types for all these mutations.

多个突变可能需要相同的输入参数。因此，创建输入类型并对所有这些突变重新使用输入类型是一个好习惯。

Here we are creating an input type for the movie called inputMovieType.

在这里，我们为影片创建一个输入类型，称为inputMovieType 。

We can see that inputMovieType, in turn, comes from inputtypes.js file. Let us create this now.

我们可以看到inputMovieType依次来自inputtypes.js文件。现在让我们创建它。

Create a new file called inputtypes.js.

创建一个名为inputtypes.js的新文件。

Copy the following code into 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;

We can see that an Input Type looks exactly like any other Type in GraphQL. GraphQLInputObjectType is used to create an Input Type, while GraphQLObjectType is used to create normal Types.

我们可以看到，输入类型看起来与GraphQL中的任何其他类型完全一样。 GraphQLInputObjectType用于创建输入类型，而GraphQLObjectType用于创建普通类型。

解决突变的功能 (Resolve function of a mutation)

The resolve function of a mutation is where the actual write operation happens.

突变的解析功能是实际写操作发生的地方。

In a real application, this can be a Database write operation.

在实际的应用程序中，这可以是数据库写操作。

For this example, we are just adding the data to the movies array and then returning the added movie back.

对于此示例，我们只是将数据添加到movies数组，然后将添加的电影返回。

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 });
            }

The above code in resolve does the following actions:

上面的代码insolve执行以下操作：

Gets the input movie parameters from input arg.
从输入 arg获取输入影片参数。
Adds the new movie to the movies array
将新电影添加到电影数组
Returns the new movie which was added by fetching it from the movies array
返回通过从Movies数组获取新电影而添加的新电影

添加导演突变 (Add director mutation)

Let us create a mutation which can be used to add a new director.

让我们创建一个可用于添加新导演的突变。

This would be the same as adding the movie Mutation.

这与添加电影“变异”相同。

inputtypes.js with director Mutation added:

带有导演Mutation的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 }

    }
});

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

    }
});

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

mutation.js after adding addDirector mutation:

加入addDirector突变后mutation.js：

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;

启用突变 (Enabling the mutations)

Until now we have defined the mutation endpoints and their functionalities. But we haven’t enabled the mutations yet.

到现在为止，我们已经定义了突变终点及其功能。但是我们还没有启用这些突变。

To enable them, the mutations have to be added to the schema.

要启用它们，必须将突变添加到架构中。

The mutation is added using the following code in server.js:

使用server.js中的以下代码添加了变异：

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

Complete Code in server.js after adding the mutation:

添加突变后，在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}`);

码 (Code)

The complete code for this article can be found in this git repo.

在git repo中可以找到本文的完整代码。

测试突变终点 (Testing the mutation end points)

Run the application using the following command:

使用以下命令运行应用程序：

node server.js

Open your web browser and go to the following URL localhost:5000/graphql

打开您的Web浏览器，然后转到以下URL localhost：5000 / graphql

测试addMovie突变终点 (Test addMovie mutation endpoint)

Input:

输入：

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

Output:

输出：

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

Input:

输入：

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

Output:

输出：

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

测试addDirector突变终点 (Test addDirector mutation endpoint)

Input:

输入：

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

Output:

输出：

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

恭喜😊 (Congrats 😊)

You now know about Mutations in GraphQL!

您现在知道了GraphQL中的突变！

You can check out the documentation to know more about GraphQL.

您可以查看文档以了解有关GraphQL的更多信息。

关于作者 (About the author)

I love technology and follow the advancements in the field.

我热爱技术，并关注该领域的进步。

Feel free to connect with me on my LinkedIn account https://www.linkedin.com/in/aditya1811/

随时使用我的LinkedIn帐户与我联系https://www.linkedin.com/in/aditya1811/

You can also follow me on twitter https://twitter.com/adityasridhar18

您也可以在Twitter上关注我https://twitter.com/adityasridhar18

My Website: https://adityasridhar.com/

我的网站： https : //adityasridhar.com/

Read more of my articles on my blog at adityasridhar.com.

在adityasridhar.com的博客上阅读更多文章。

翻译自: https://www.freecodecamp.org/news/an-intro-to-mutations-in-graphql-what-they-are-and-how-to-use-them-e959735abd8d/

cumian8165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GraphQL中的突变简介：它们是什么以及如何使用它们

使用滑动t检验检验突变This blog post is a continuation of my previous blog post on GraphQL Basics. Click Here to check out the GraphQL Basics post. 这篇博客文章是我之前关于GraphQL Basics的博客文章的延续。单击此处查看GraphQL Basics帖子。 It...
复制链接

扫一扫