Egg 中Apollo GraphQL的初尝试

graphql

GraphQL 是由 Facebook 创造的用于描述复杂数据模型的一种查询语言。这里查询语言所指的并非常规意义上的相似 sql 语句的查询语言,而是一种用于先后端数据查询方式的规范。javascript

  • Egg + Apollo Server 服务端的实现
  • React + Apollo Client 实践

Egg + Apollo Server 服务端的实现

Apollo 是构建数据图的平台,这是一个将应用程序客户端(如 React 和 iOS 应用程序)无缝链接到后端服务的通讯层。java

Apollo Server

Apollo Server 提供的服务包文件以下,能够根据你项目的场景来进行使用sql

server后端

server

egg-graphql

// config/plugin.js
exports.graphql = {
  enable: true,
  package: 'egg-graphql',
}; 


复制代码

由于egg是基于koa 实现的,因此Apollo Server中使用 apollo-server-koabash

在中间件中开启 graphql

exports.middleware = [ 'graphql' ];

// middleware 中graphql 的配置

const { graphqlKoa } = require('apollo-server-koa');
// import { graphqkoa } form 'apollo-server-koa';

module.exports = (_, app) => {
  const options = app.config.graphql;
  const graphQLRouter = options && options.router;

  return async (ctx, next) => {
    if (ctx.path === graphQLRouter) {
      return graphqlKoa({
        schema: app.schema,
        context: ctx,
      })(ctx);
    }
    await next();
  };
};

复制代码

配置提供 graphql 的路由。app

// config/config.${env}.js
exports.graphql = {
  router: '/graphql',
  // 是否加载到 app 上,默认开启
  app: true,
  // 是否加载到 agent 上,默认关闭
  agent: false,
};

// router.ts 文件配置

// test graphql
router.get(`/graphql/query`, controller.userGraphql.testQuery);
router.get(`/graphql/user`, controller.userGraphql.test);


复制代码

在control 文件夹下添加对应的文件userGraphqlkoa

import { Controller } from 'egg';

export default class GraphqlController extends Controller {
  // 仅仅test graphql 不涉及service 以及sql 的操做
  public async testQuery() {
    const { ctx } = this;
    const { query } = ctx.request.query;
    const totalData = query === 'test' ? { test: 'Hello world!' } : {};

    ctx.body = {
      data: totalData,
    };
  }
}


复制代码

React + Apollo Client 实践

GraphQL.jsasync

var { graphql, buildSchema } = require('graphql');

var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

var root = { hello: () => 'Hello world!' };

graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

复制代码

参考

apolloui

Graphqlthis

相关文章
相关标签/搜索