全栈修炼

09 05月

NodeJs中使用Apollo Server构建GraphQL API服务

2021-05-09 全栈修炼

NodeJs中使用Apollo Server构建GraphQL API服务

GraphQL是一种通过强类型查询语言构建api的新方法。GraphQL于2015年由Facebook发布，目前正迅速获得关注，并被Twitter和Github等其他大型公司所采用，之前写过一篇《浅谈NodeJS搭建GraphQL API服务》只是简单介绍构建API。在本文中，我们将介绍如何使用Apollo Server在Node.js中设置GraphQL服务器。

服务器上GraphQL的高级概述

一旦熟悉了所有的活动部件，GraphQL的上手实际上就非常简单。GraphQL服务是通过一个模式定义的，其工作原理大致如下:

GraphQL的高级概述

Types：类型

类型是数据模型的强类型表示，这是一个使用Apollo的graphql-tools定义的帖子类型的示例，在本教程中将使用它来定义架构。

import User from "./user_type";
const Post = `
  type Post {
    id: Int!
    title: String!
    body: String!
    author_id: Int!
    author: User
  }
`;
export default () => [Post, User];

Queries：查询

查询是定义可以针对架构运行哪些查询的方式，这是模式的RootQuery中的一个查询的示例；

const RootQuery = `
  type RootQuery {
    posts: [Post]
    post(id:Int!): Post
    users: [User]
    user(id:Int!): User
  }
`;

Mutations：更改

更改（Mutations）类似于post请求（尽管它们实际上只是查询的同步版本），它们允许将数据发送到服务器以执行插入、更新或者删除。下面是一个为新博客文章定义更改（Mutations）的例子，它接受输入类型PostInput并将新创建的文章作为post类型返回。

const RootMutation = `
  type RootMutation {
    createPost(input: PostInput!): Post
  }
`;

Subscriptions：订阅

订阅允许通过GraphQL订阅服务器发布实时事件，下面定义了一个订阅的示例：

const RootSubscription = `
  type RootSubscription {
    postAdded(title: String): Post
  }
`;

现在，可以通过在createPost突变解析器中运行此事件，将事件发布到订阅的事件。

pubsub.publish(‘postAdded’, { postAdded: post });

Resolvers：解析器

解析器是执行操作以响应查询、变异或订阅的地方，在这里，可以进入数据库层执行CRUD操作并返回适当的响应。如下的示例：

resolvers: {
  RootQuery: {
    posts: () => posts,
    post: async (_, { id }) => 
      await Post.query()
  },
  RootMutations: {
    createPost: async (_, { input }) => 
      await Post.query.insert(input)
  },
  RootSubscriptions: {
    postAdded: {
    subscribe: () => 
      pubsub.asyncIterator('postAdded')
  },
  Post: {
    author: async post => 
      await User.query().where("id", "=", post.author_id)
  }
}

Schema：模式

模式（Schema）是将所有活动部分连接在一起，构建服务的API。

开始进入项目

如果想要查看的代码，请在此处找到一个仓库。

安装依赖

首先创建一个项目，这里命名为：graphql-hello-api

mkdir graphql-hello-api

然后进入目录，执行一下命令：

yarn init

添加必须的依赖：

yarn add apollo-server graphql

创建Hello

创建一个名为src的文件夹，为了更好展示整个过程，不同的示例命名为不同的文件名称，先来创建一个文件：index001.js。

首先定义了一个查询类型：

const typeDefs = gql`
    type Query {
        hello: String
    }
`;

接下来定义解析器（或GraphQL教程中的根）来解析给定的查询：

const resolvers = {
    Query: {
        hello: () => {
            return "Hello World!";
        },
    },
};

最后，实例化ApolloServer，然后启动服务。

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

index001.js的所有代码如下：

const { ApolloServer, gql } = require("apollo-server");

const typeDefs = gql`
    type Query {
        hello: String
    }
`;

const resolvers = {
    Query: {
        hello: () => {
            return "Hello World!";
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

下面我们来启动GraphQL Server，进入文件夹src，执行如下命令，打开浏览器，输入http://localhost:3005/：

node index001.js

将看下如下界面：

GraphQL操作流程

按照上面的图的步骤，录入定义的查询{hello}，运行结果如下：

GraphQL查询1

GraphQL查询的基本类型可以由字符串、整数、浮点数、布尔值和ID及其列表[]组成，下面开始添加一些逻辑代码。

在这里，使用不同的类型如下定义typeDefs。这!表示不可为空的结果。接下来我们创建index002.js，定义3个查询，分别为字符串、浮点数和[]。

const typeDefs = gql`
    type Query {
        today: String
        random: Float!
        fibonacci: [Int]
    }
`;

相应地设置解析器，如下：

const resolvers = {
    Query: {
        today: () => {
            return new Date().toDateString();
        },
        random: () => {
            return Math.random();
        },
        fibonacci: () => {
            return fibonacci(10);
        },
    },
};

现在可以看看完整的代码，即index.js的完整代码：

const { ApolloServer, gql } = require("apollo-server");

const fibonacci = (length) => {
    let nums = [0, 1];
    for (let i = 2; i <= length; i++) {
        nums[i] = nums[i - 1] + nums[i - 2];
    }
    return nums;
};

const typeDefs = gql`
    type Query {
        today: String
        random: Float!
        fibonacci: [Int]
    }
`;

const resolvers = {
    Query: {
        today: () => {
            return new Date().toDateString();
        },
        random: () => {
            return Math.random();
        },
        fibonacci: () => {
            return fibonacci(10);
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

运行结果如下：

GraphQL运行结果

传递参数

现在来展示如何使用查询将一些参数传递给服务器，创建index003.js，本示例我们将定义查询获取一个指定长度的斐波那契数组，定义参数length。代码如下：

const typeDefs = gql`
    type Query {
        fibonacci(length:Int!): [Int]
    }
`;

接下来就是解析器，请注意，使用Apollo Server时，它的API于GraphQL API略有不同。参数通过第二个参数传递，格式为：fibonacci: (_, { length })，这里暂时忽略带有_的第一个参数。

const resolvers = {
    Query: {
        fibonacci: (_, { length }) => {
            return fibonacci(length);
        },
    },
};

这里是完整的代码：

const { ApolloServer, gql } = require("apollo-server");

const fibonacci = (length) => {
    let nums = [0, 1];
    for (let i = 2; i <= length; i++) {
        nums[i] = nums[i - 1] + nums[i - 2];
    }
    return nums;
};

const typeDefs = gql`
    type Query {
        fibonacci(length: Int!): [Int]
    }
`;

const resolvers = {
    Query: {
        fibonacci: (_, { length }) => {
            return fibonacci(length);
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

在左边窗口输入查询：

{
  fibonacci(length:10)
}

运行结果如下：

GraphQL传递参数查询

对象类型

有时需要返回一个由基本类型构造的更复杂的对象，可以通过为它声明一个类（JavaScript ES6）类型来实现，新建一个文件index004.js，完整代码如下：

const { ApolloServer, gql } = require("apollo-server");

/**
 * 定义一个基础查询，返回查询RandomDie
 */
const typeDefs = gql`
    type RandomDie {
        numSides: Int!
        rollOnce: Int!
        roll(numRolls: Int!): [Int]
    }
    type Query {
        getDie(numSides: Int): RandomDie
    }
`;
class RandomDie {
    constructor(numSides) {
        this.numSides = numSides;
    }
    rollOnce() {
        return 1 + Math.floor(Math.random() * this.numSides);
    }
    roll({ numRolls }) {
        const output = [];
        for (let i = 0; i < numRolls; i++) {
            output.push(this.rollOnce());
        }
        return output;
    }
}
const resolvers = {
    Query: {
        getDie: (_, { numSides }) => {
            return new RandomDie(numSides || 6);
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

在录入查询的时候就当调用getDie作为基础查询，如下：

{
  getDie(numSides:6){
    numSides,
    rollOnce,
    roll(numRolls:10)
  }
}

运行结果如下：

GraphQL对象类型查询

使用mutation

前面介绍了Mutations：更改，如果要修改服务器端数据，需要使用mutation代替query，创建index005.js。

const { ApolloServer, gql } = require("apollo-server");

const fakeDb = {};

const typeDefs = gql`
    type Mutation {
        setTitle(title: String): String
    }
    type Query {
        getTitle: String
    }
`;

const resolvers = {
    Mutation: {
        setTitle: (_, { title }) => {
            fakeDb.title = title;
            return title;
        },
    },
    Query: {
        getTitle: () => {
            return fakeDb.title;
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

输入查询：

mutation{
  setTitle(title:"Hello DevPoint!")
}

执行结果如下：

GraphQL Server使用mutation

输入类型

有时希望将同类信息设计在一个对象里面进行维护或者规范输入，可以按照接口的方式定义输入类型结构，创建 index006.js，实现一个维护网站基本信息的示例，整体代码如下：

const { ApolloServer, gql } = require("apollo-server");
const { nanoid } = require("nanoid");

const typeDefs = gql`
    input SiteInput {
        title: String
        author: String
        url: String
    }

    type SiteDetail {
        id: ID!
        title: String
        author: String
        url: String
    }

    type Query {
        getSite(id: ID!): SiteDetail
    }

    type Mutation {
        createSite(input: SiteInput): SiteDetail
        updateSite(id: ID!, input: SiteInput): SiteDetail
    }
`;

class SiteDetail {
    constructor(id, { author, title, url }) {
        this.id = id;
        this.title = title;
        this.author = author;
        this.url = url;
    }
}

const fakeDb = {};

const resolvers = {
    Mutation: {
        createSite: (_, { input }) => {
            var id = nanoid();

            fakeDb[id] = input;
            return new SiteDetail(id, input);
        },
        updateSite: (_, { id, input }) => {
            if (!fakeDb[id]) {
                throw new Error("信息不存在 " + id);
            }
            fakeDb[id] = input;
            return new SiteDetail(id, input);
        },
    },
    Query: {
        getSite: (_, { id }) => {
            if (!fakeDb[id]) {
                throw new Error("信息不存在 " + id);
            }
            return new SiteDetail(id, fakeDb[id]);
        },
    },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(3005).then(({ url }) => {
    console.log(`🚀 GraphQL Server ready at ${url}`);
});

执行node index006.js运行，输入一下语句创建一个site信息对象，并查询新创建对象的ID：

mutation{
  createSite(input:{
    title:"DevPoint",
    author:"QuintionTang",
    url:"https://www.devpoint.com"}
  ){
    id
  }
}

运行结果如下：

GraphQL输入类型查询

接下来根据返回的ID，查询信息：

query{
  getSite(id:"w3pFxgiCyHgZ8vF6ip1D2"){
    id,
    author,
    title,
    author
  }
}

运行结果如下：

GraphQL负责查询

执行更新操作并查询最新数数据：

mutation{
  updateSite(id:"w3pFxgiCyHgZ8vF6ip1D2",input:{
    title:"DevPoint WebSite"
  }){
    id,
    title,
    author
  }
}

运行结果如下：

GraphQL查询效果图

验证

之前有朋友问到是否有统一验证的地方。

GraphQL有没有统一的入口可以验证参数的有效性？

答案是有的，可以使用GraphQL的context在HTTP服务器和GraphQL服务器之间实现身份验证。通过自定义context构建功能，实现请求及用户权限的验证。本文只是简单介绍一下，下期专门写一遍GraphQL中的身份及请求合法性验证文章。

const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req }) => {
        // 在这里进行请求验证
        const author = "QuintionTang";
        return { author };
    },
});

上面所有代码都提交到Github上了，https://github.com/QuintionTang/graphql-hello-api。

GraphQLApollo Server