GraphQL+ Express +mysql project complete demo

GraphQL is an application-level query language developed by Facebook in 2012 and open source in 2015. You define a graphQL-based pattern in the background, and then your clients can query the data they want, without having to redefine an interface to return the data you need.

Because you don’t need to change your background, this approach is better than the REST API approach and gives you the flexibility to change the data display on different clients.

GraphQL is a specification. This means you can implement GraphQL in any language. Click here to see more about GraphQL. Facebook has a GraphQL implementation for JavaScript.

GraphQL is introspective, which means you can query a GraphQL to know its own schema details.

Query __schema to list all types defined in that schema and get the details for each:

query {
  __schema {
    types {
      name
      kind
      description
      fields {
        name
      }
    }
  }
}
Copy the code

Query __type for details of any type:

query {
  __type(name: "Repository") {
    name
    kind
    description
    fields {
      name
    }
  }
}
Copy the code

Tip: Introspection queries are probably your only GET requests in GraphQL. Whether it's query or mutation, the GraphQL request should be POST if you want to pass the request body

{
	courses {
    id
	  score
	  course
	}
}
Copy the code

Results:

{" data ": {" courses" : [{" id ": 1," score ": 33," course ":" mathematics "}, {" id ": 2," score ": 55," course ":" the language "}, {" id ": 3, "score": 55, "course": "math"}]}Copy the code

### separate query (with parameters)

{
	course(id:1) {
	  score
	  course
	}
}
Copy the code

Results:

{" data ": {" course" : {" score ": 33," course ":" mathematics "}}}Copy the code

{
	courses {
    id
	  score
	  course
	}
  users {
    id
    name
  }
}
Copy the code

The results of

{" data ": {" courses" : [{" id ": 1," score ": 33," course ":" mathematics "}, {" id ": 2," score ": 55," course ":" the language "}], "users" : [ { "id": 1, "name": "xiaoming" }, { "id": 2, "name": "2" }, { "id": 3, "name": "2333" } ] } }Copy the code

mutation {
  addUserByInput (userInfo:{
    name:"222222",
    intro:"33",
    sex:"2"
  }) {
    id
  }
}

Copy the code

Results:

{
  "data": {
    "addUserByInput": {
      "id": 27
    }
  }
}Copy the code

http://localhost:3003/article

Sometimes we need to filter the queried data, such as limiting the size, and we need a nested query to do this.

For example, the following query starts with A national province information:

{
  address(nameKey:"A"){
    ShortKey,
    Content(limit:5) {
      Id,
      Code,
      Name,
      FirstStr
    }
  }
}Copy the code

The server returns:

{" data ": {" address" : [{" ShortKey ":" A ", "Content" : [{" Id ": 36," Code ":" 152900 ", "Name" : "la shan union", "FirstStr" : "A"}, {" Id ": 39," Code ":" 210300 ", "Name" : "anshan city", "FirstStr" : "A"}, {" Id ": 105," Code ":" 340800 ", "Name" : "Anqing city," "FirstStr" : "A"}, {" Id ": 155," Code ":" 410500 ", "Name" : "anyang city", "FirstStr" : "A"}, {" Id ": 293," Code ": "513200", "Name" : "aba Tibetan and qiang autonomous prefecture," "FirstStr" : "A"}}}}]]Copy the code

The Content field limits the return of the top five markets. Note that the limit is set by the server, not the Graphql keyword.

http://localhost:3003/article

In GraphQL, a fragment is a fragment that can be reused.

If we need to query information about three different articles, we might do the following query:

{
  first:posts(index:1){
    title,
    category,
    layout
  },
  second:posts(index:2){
    title,
    category,
    layout
  },
  third:posts(index:3){
    title,
    category,
    layout
  }
}Copy the code

We ran the above posts query over and over again, and it might not seem like much at first, but when the data you need to query has dozens of fields, you start to get a headache (trust me).

So what are some ways that we can reuse this piece that we use a lot?

Let me give you the answer:

fragment post on Post{
  title,
  category,
  layout
}Copy the code

The above is a shard,Post is a server defined type, you can look at the document in the upper right corner, each operation name will have a return type.

Let’s start with this shard:

{ first:posts(index:1){ ... post }, second:posts(index:2){ ... post }, third:posts(index:3){ ... post } } fragment post on Post{ title, category, layout }Copy the code

Using object expander… If you’re familiar with ES6, you’ll be particularly familiar with this, so could we try something similar in ES6?

Let’s try:

{ first:posts(index:1){ ... post }, second:posts(index:2){ ... post, category }, third:posts(index:3){ ... post, layout } } fragment post on Post{ title, category, }Copy the code

It doesn’t seem to be a problem at all, the server is returning the correct information, I won’t explain this, it is all ES6 stuff, if you don’t understand ES6 then you should hurry up.

As mentioned above, sharding can save a lot of time, so now I’m going to talk about query variables that can increase your life (ok, I admit I’m pulling my hair out).

For the query with parameters above, we queried the data when index equals 1,2, and 3. Sharding reduces the time you need to enter the same field, and query variables reduce the time you need to write the shard…

How much nonsense fill, first look at the code:

query getFewPosts($index: Int!) { first:posts(index:$index){ ... post } } fragment post on Post{ title, category, }Copy the code

Then enter in the query window:

{
	"index":1
}Copy the code

This is a simple variable query that can also be used with sharding. You can add several variables to increase the use of sharding:

query getFewPosts($index: Int! , $index1: Int! , $index2: Int!) { first:posts(index:$index){ ... post }, second:posts(index:$index1){ ... post, category }, third:posts(index:$index2){ ... post, layout } } fragment post on Post{ title, category, }Copy the code

Then enter in the query window:

{
  "index": 1,
  "index1": 2,
  "index2": 3
}Copy the code

Front-end query:

var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.open("POST", "/article"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Accept", "application/json"); xhr.onload = function () { console.log('data returned:', xhr.response); } xhr.send(JSON.stringify({ query: ` query getFewPosts($index: Int! , $index1: Int! , $index2: Int!) { first:posts(index:$index){ ... post }, second:posts(index:$index1){ ... post, category }, third:posts(index:$index2){ ... post, layout } } fragment post on Post{ title, category, } `, variables:{ "index": 1, "index1": 2, "index2": 3 } }));Copy the code

var express = require('express'); var graphqlHTTP = require('express-graphql'); var { GraphQLList, GraphQLObjectType, GraphQLSchema, GraphQLString, GraphQLInt, GraphQLFloat, GraphQLEnumType, GraphQLNonNull, GraphQLInterfaceType, GraphQLInputObjectType, GraphQLUnionType } = require('graphql'); Var animals=[{chinaName: 'dog ', legs: 4}, {englishName: 'fish', tailColor:'red'},]; // define schema and resolver const Dog = new GraphQLObjectType({name: 'Dog', description: 'Dog entity ', fields: () => ({chinaName: {type: new GraphQLNonNull(GraphQLString)}, legs: {type: new GraphQLNonNull(GraphQLInt)}, }), isTypeOf:obj=>obj.legs, }); Const Fish=new GraphQLObjectType({name:'Fish', description:" Fish entity ", fields: () => {return ({englishName: {type: new GraphQLNonNull(GraphQLString)}, tailColor: {type: new GraphQLNonNull(GraphQLString)}, }); }, isTypeOf:obj=>obj.tailColor, }); const Animal = new GraphQLUnionType({ name: 'Animal', description: 'Union', types:[Dog,Fish], resolveType:function (obj) { if(obj.legs) { return Dog; }else if(obj.tailColor){ return Fish; }else{ return null; }}}); Const Query=new GraphQLObjectType({name:'AnimalQuery', description:' AnimalQuery', Fields ()=>({animals:{type:new GraphQLList(Animal), description:' Query all animals ', resolve:function () {return animals; }}})}); const schema = new GraphQLSchema({ types: [Dog, Fish,Animal], query: Query }); var app = express(); App. use('/graphql', graphqlHTTP({schema: schema, graphiQL: true, // enable graphiQL})); App.listen (4000, () => console.log(' localhost:4000/graphql'));Copy the code

Const Post = new GraphQLObjectType({name:"Post", description:" an article ", Fields ()=>({_id:{type:new GraphQLNonNull(GraphQLString),// null is not allowed}, Title :{type:new GraphQLNonNull(GraphQLString),// can't be empty}, category:{type:GraphQLString}, layout:{ type:GraphQLString }, content:{ type:GraphQLString }, }) });Copy the code

An article contains the id, title, category, layout, and the content of these information, the empty string is not allowed in the id and title, if the query to the data without the two would be an error.

Once defined, we need to create a reference in the root query, otherwise the definition will not be used:

Const Query = new GraphQLObjectType({name: 'BlogSchema', description: 'Root of the Blog Schema', fields: () => ({// echo: {//... }, // Post query posts:{type:new GraphQLList(Post), args:{index:{type:GraphQLInt}}, Resolve :(source,args)=>{return [PostsList[args.index]],// return array (although only one)}}}); })Copy the code

The article query posts receives an index parameter, which is an integer.

Resolve returns the corresponding article information stored in the PostsList array, because posts returns an array (all the data in the array is Post objects), and the query is a Post object, so it needs to be enclosed in an array number.

Sometimes you need to nest severalGraphQLObjectTypeFor example, schema.js in the project defines an address query and three layers of query.

1. Learn to use DataLoader to get list data

2. Advanced usage interface federation, etc

# Related documents:

Official Video Tutorial

GraphQL series is a quick start tutorial

GraphQL series two data types

GraphQL series 3 JavaScript basics

This series is better

What the devil GraphQL

GraphQL exploration of node.js server practice

GraphQL with Koa Best Introductory practices

Basic set of implementation, but no database, can not run through

GraphQL: From REST to GraphQL, a more complete data query definition

GraphQL: An interface style that differs from REST

Github: github.com/zhaiqianfen… Github.com/proYang/Gra… The KOA implementation documentation is good and the package is good. Pretty good ### pit

1. Async awit problem between graphQL and mysql database query