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

相關文章
相關標籤/搜索