koa + graphql的使用

发表于 | 浏览 次

目标

完成http请求到graphql的请求改造

实现

内容大部分来自己graphql与apollo-server官网, 内部加上自己的一些理解,至于改造嘛,就自己动手咯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const Koa = require("koa");
const { ApolloServer, gql } = require("apollo-server-koa");
const GraphQLJSON = require("graphql-type-json");
const { GraphQLScalarType } = require("graphql");
const { Kind } = require("graphql/language");
const books = [
  {
    title: "Harry Potter and the Chamber of Secrets",
    author: "J.K. Rowling",
  },
  {
    title: "Jurassic Park",
    author: "Michael Crichton",
  },
];

const users = [
  {
    id: "1",
    name: "Elizabeth Bennet",
  },
  {
    id: "2",
    name: "Fitzwilliam Darcy",
  },
];

const typeDefs = gql`
  type Query {
    #   返回字符串
    hello: String
    # 返回数组
    books: [Book]
    # 通过参数查询
    user(id: ID): User
    info(date: Date): String
    # 读取数据
    foo: Foo
  }
  #使用第三方定义的标量 json类型
  scalar JSON
    # 使用自定义的date类型
  scalar Date
  type Foo {
    user: JSON
    created: Date
  }

  type Book {
    title: String
    author: String
  }

  type User {
    id: ID
    name: String
  }
`;

const resolvers = {
  JSON: GraphQLJSON, // 使用第三方的json标量
  Date: new GraphQLScalarType({
    // 自定义标量
    name: "Date",
    description: "Date custom scalar type",
    parseValue(value) {
      // variables 参数解析路径
      return new Date(value);
    },
    serialize(value) {
      return value.getTime();
    },
    parseLiteral(ast) {
      // 字面量参数路径
      if (ast.kind === Kind.INT) {
        // ast.value 永远是 字符串类型 所以需要转换
        return new Date(+ast.value);
      }
      return null;
    },
  }),
  Query: {
    hello: () => {
      return "Hello shaokun!";
    },
    books: () => books, // 直接返回数据库中的books
    user(parent, args, context) {
      // parent 连续查询 中 上一次查询的结果
      // args 查询参数 如上面的id
      // context 全局数据的拿取
      console.log(parent, args, context.name, context.age);
      return users.find((user) => user.id === args.id);
    },
    foo: () => {
      return {
        user: { name: "shaokum" },   // 如果返回的不是json类型 则为null
        created: new Date(),        // Date类型 实际返回给前端的是 定义的scalar中的serialize方法
      };
    },
    info: (_, args) => {
      // 查询方式 字面常量方式查询
      // {
      //     info(data:1597552212000)
      // }
      console.log("---info-", args); // 通过Date.parseLiteral 方法拿到解析的数据
      return "this date is " + args.date.toString();
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: async (request) => {
      // 可获取到rquest请求
    // 可以全局挂载,如授权token db实例
    return {
      name: "shaokun",
      age: 18,
    };
  },
});

const app = new Koa();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);
结果演示

graphql query demo

关于我

区块链技术痴迷的程序猿一枚，如果你喜欢我的文章，可以加上微信共同学习，共同进步。