我只是试着做了一下GraphQL.js的教程

1 年 ago
雅, 悟
4 minutes

我是一个初学者。我只是按照这个教程自己尝试，并将结果以备忘录的形式写下来。请多关照。

开始使用GraphQL.js | GraphQL.js教程

学习如何使用GraphQL.js

GraphQL.js的安装

yarn add graphql

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

// GraphQLスキーマ言語を使用して、スキーマを構築
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// ルートは各APIエンドポイントにリゾルバー機能を提供する
const root = {
  hello: () => {
    return 'Hello world!';
  },
};

// GraphQLクエリ '{ hello }' を実行してレスポンスを出力
graphql(schema, '{ hello }', root).then((response) => {
    console.log(response);
});

$ node server.js 
{ data: [Object: null prototype] { hello: 'Hello world!' } }

运行一个 Express GraphQL 服务器

安装必需的库以在Express中执行。

yarn add express express-graphql graphql

创建API服务器

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

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

const root = {
  hello: () => {
    return 'Hello world!';
  },
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');

$ node server.js 
Running a GraphQL API server at http://localhost:4000/graphql

由于设置了 `graphiql: true`，您可以使用 GraphiQL。

Screen Shot 2020-03-21 at 17.06.55.png

GraphQL客户端

    curlでgraphqlを実行する
$ curl -X POST -H "Content-Type: application/json" -d '{"query": "{ hello }"}' http://localhost:4000/graphql
{"data":{"hello":"Hello world!"}}
    • GUIで実行する場合はGraphiQLやInsomniaなどを使う

 

    ブラウザから実行する

打开 http://localhost:4000/graphql 的开发工具，并复制粘贴以下内容。

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({query: "{ hello }"})
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));
Screen Shot 2020-03-22 at 19.19.00.png

基本类型

GraphQL的Schema语言支持String、Int、Float、Boolean和ID这几种标量类型，因此可以直接在传递给buildSchema的Schema中使用它们。

默认情况下，所有类型都允许为null值。将任意一个标量类型返回为null是合法的。通过使用感叹号，可以表示该类型不可为null，例如String！表示不可为null的字符串。

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    quoteOfTheDay: String
    random: Float!
    rollThreeDice: [Int]
  }
`);

const root = {
  quoteOfTheDay: () => {
    return Math.random() < 0.5 ? 'Take it easy' : 'Salvation lies within';
  },
  random: () => {
    return Math.random();
  },
  rollThreeDice: () => {
    return [1, 2, 3].map(_ => 1 + Math.floor(Math.random() * 6));
  },
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

我可以确认已经以指定的类型获取到了数据。

Screen Shot 2020-03-22 at 19.40.20.png

传递参数 dì shū)

定义一个名为rollDice的函数，该函数接受numDice和numSides作为参数。

type Query {
  rollDice(numDice: Int!, numSides: Int): [Int]
}

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    rollDice(numDice: Int!, numSides: Int): [Int]
  }
`);

const root = {
  rollDice: ({numDice, numSides}) => {
    const output = [];
    for (let i = 0; i < numDice; i++) {
      output.push(1 + Math.floor(Math.random() * (numSides || 6)));
    }
    return output;
  }
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

确认带参数的延迟

Screen Shot 2020-03-22 at 19.53.24.png

在设置参数时，最好使用$语法。

const dice = 3;
const sides = 6;
const query = `query RollDice($dice: Int!, $sides: Int) {
  rollDice(numDice: $dice, numSides: $sides)
}`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: { dice, sides },
  })
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));
Screen Shot 2020-03-22 at 20.00.27.png

物体类型

请指定对象类型并返回值。

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type RandomDie {
    numSides: Int!
    rollOnce: Int!
    roll(numRolls: Int!): [Int]
  }

  type Query {
    getDie(numSides: Int): RandomDie
  }
`);

class RandomDie {
  constructor(numSides) {
    this.numSides = numSides;
  }

  rollOnce() {
    return 1 + Math.floor(Math.random() * this.numSides);
  }

  roll({numRolls}) {
    const output = [];
    for (let i = 0; i < numRolls; i++) {
      output.push(this.rollOnce());
    }
    return output;
  }
}

const root = {
  getDie: ({numSides}) => {
    return new RandomDie(numSides || 6);
  }
}

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

{
  getDie(numSides: 6) {
    numSides
    rollOnce
    roll(numRolls: 3)
  }
}
Screen Shot 2020-03-22 at 20.17.26.png

突变和输入类型

创建或更新数据可以使用mutatison而不是query进行发送。
为了简化模式，建议使用input关键字而不是type关键字。

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  input MessageInput {
    content: String
    author: String
  }

  type Message {
    id: ID!
    content: String
    author: String
  }

  type Query {
    getMessage(id: ID!): Message
  }

  type Mutation {
    createMessage(input: MessageInput): Message
    updateMessage(id: ID!, input: MessageInput): Message
  }
`);

class Message {
  constructor(id, {content, author}) {
    this.id = id;
    this.content = content;
    this.author = author;
  }
}

const fakeDatabase = {};

const root = {
  getMessage: ({id}) => {
    if (!fakeDatabase[id]) {
      throw new Error('no message exists with id ' + id);
    }
    return new Message(id, fakeDatabase[id]);
  },
  createMessage: ({input}) => {
    const id = require('crypto').randomBytes(10).toString('hex');

    fakeDatabase[id] = input;
    return new Message(id, input);
  },
  updateMessage: ({id, input}) => {
    if (!fakeDatabase[id]) {
      throw new Error('no message exists with id ' + id);
    }
    fakeDatabase[id] = input;
    return new Message(id, input);
  },
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000, () => {
  console.log('Running a GraphQL API server at localhost:4000/graphql');
});

确认数据创建

Screen Shot 2020-03-22 at 20.32.59.png

确认数据更新

Screen Shot 2020-03-22 at 20.34.59.png
✖
广告
将在 10 秒后关闭
bannerAds