美文网首页
graphql入门

graphql入门

作者: zxhnext | 来源:发表于2019-06-16 10:24 被阅读0次

我们新建一个app.js

import koa from 'koa'; // koa@2 
import koaRouter from 'koa-router'; // koa-router@next 
import koaBody from 'koa-bodyparser'; // koa-bodyparser@next 
import { graphqlKoa } from 'graphql-server-koa'; // apollo
import render from 'koa-swig';
import co from 'co';
import serve from 'koa-static';
import { graphql, GraphQLSchema,GraphQLObjectType, GraphQLString,GraphQLInt } from 'graphql';
 //数据
 const data ={
  "1": {
    "id": "1",
    "name": "一号老王",
    "age":23
  },
  "2": {
    "id": "2",
    "name": "二号老袁",
    "age":18
  },
  "3": {
    "id": "3",
    "name": "三号老方",
    "age":20
  }
};
const userType = new GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: GraphQLString },
    name: { type: GraphQLString },
    age:{ type: GraphQLInt }
  }
});
const myGraphQLSchema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      user: {
        type: userType,
        // `args` describes the arguments that the `user` query accepts
        args: {
          id: { type: GraphQLString }
        },
        // The resolve function describes how to "resolve" or fulfill
        // the incoming query.
        // In this case we use the `id` argument from above as a key
        // to get the User from `data`
        resolve: function (_, args) {
          return data[args.id];
        }
      }
    }
  })
});

const app = new koa();
const router = new koaRouter();
const PORT = 3000;
app.use(serve('./')); // 静态资源文件
 app.context.render = co.wrap(render({
    root: './',
    autoescape: true,
    cache: 'memory', // disable, set to false
    ext: 'html',
    varControls: ['[[', ']]'],
    writeBody: false
}));
// koaBody is needed just for POST. 
app.use(koaBody());
router.post('/graphql', graphqlKoa({ schema: myGraphQLSchema }));
router.get('/graphql', graphqlKoa({ schema: myGraphQLSchema }));
router.get('/index', async ctx => ctx.body = await ctx.render('index'));
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(PORT);

前端发起请求:

import Lokka from 'lokka';
import Transport from 'lokka-transport-http';
const client = new Lokka({
  transport: new Transport('http://localhost:3000/graphql')
});
const dataInfo = client.createFragment(`
  fragment on User {
    name,
    age
  }
`);

client.query(`
    {
        user(id:"2") {
          name
        }
    }
`).then(result => {
    console.log(result);
});

关注apollo-server-koa插件

相关文章

  • GraphQL快速入门教程

    摘要: 体验神奇的GraphQL! 原文:GraphQL 入门详解 作者:MudOnTire Fundebug经授...

  • 业务梳理(一)

    graphql入门:中文[https://graphql.cn/learn/] UI:业务信息 对应"@/comp...

  • GrowingIO 前端团队对于 GraphQL 的实践总结

    前言 社区里已有很多有关 GraphQL 入门和原理的文章,GraphQL 和 Apollo Client 的官方...

  • Graphql入门

    Graphql入门 GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API。服务端可...

  • GraphQL 概念入门

    GraphQL 概念入门[https://develop.pulsgarney.com/article/graph...

  • GraphQL入门

    写在开头 简书编辑器不好用呀,希望加一个代码框的功能。 各位少男少女如果看着比较别扭可以跳转 http://git...

  • GraphQL 入门

    为什么要使用GraphQL GraphQL是由Facebook团队在2015年开源推出的一套用于替代传统的REST...

  • graphql入门

    我们新建一个app.js 前端发起请求: 关注apollo-server-koa插件

  • GraphQL入门

    参考: GraphQL官网 与 RESTful API 对比 RESTful:服务端决定有哪些数据获取方式,客户端...

  • graphql-java使用手册: part1 入门

    原文:http://blog.mygraphql.com/wordpress/?p=96 入门 graphql-j...

网友评论

      本文标题:graphql入门

      本文链接:https://www.haomeiwen.com/subject/gsaotctx.html