graphQL入门基础（二）

发表于 | 分类于

前面介绍了如何搭建一个简单的GrqphQl服务，那么下面说一些其他的，这次的数据并不会直接拿到，而是需要服务端再去获取，更符合实际情况。

1. 类型定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const GQPoi = new GraphQLObjectType({
  name: 'poi',
  fields: {
    id: {
      type: GraphQLInt,
      resolve: e => e.id
    },
    poiName: {
      type: GraphQLString,
      resolve: e => e.pointName
    },
    address: {
      type: GraphQLString
    }
  },
});

2. 设置查询入口

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
const Query = new GraphQLObjectType({
  name: 'Query',
  fields: () => ({
    pois: {
      type: new GraphQLList(GQPoi),
      description: '店铺列表',
      resolve: async () => {
        return await getPois();
      }
    },
    poi: {
      type: GQPoi,
      description: '店铺查询',
      args: {
        id: {
          type: GraphQLInt
        }
      },
      resolve: async (source, args, ctx, info) => {
        console.log(args);
        const id = args.id;
        const pois = await getPois();
        const poi = pois.filter(e => e.id === id );
        return poi[0];
      }
    }
  })
});
export default new GraphQLSchema({
  query: Query,
});

在Query中添加了两个字段，pois是用来获取店铺列表，poi是用来查询某一个门店的信息，和之前不一样的是门店列表需要异步获取。poi还需要一个查询的id参数。

3. 查询

先来个简单的查询

1
2
3
4
5
6
query{
  pois {
    id 
    poiName
  }
}

下面使用poi来查询某一个门店的信息

1
2
3
4
5
6
query{
  poi(id: 111) {
    poiName
    poiId
  }
}

获取到的结果是

1
2
3
4
5
6
7
8
{
  "data": {
    "poi": {
      "poiName": "肯德基",
      "id": 111
    }
  }
}

可以发现GraphQL的查询是非常灵活的