简介

GraphQL是Facebook开发的一种数据查询语言，并于2015年公开发布。它是RESTAPI的替代品

GraphQL既是一种用于API的查询语言也是一个满足你数据查询的运行时。GraphQL对你的API中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让API更容易地随着时间推移而演进。

官网：https://graphql.org/

中文网：http://graphql.cn/

特点:

1. 请求需要的数据，不多不少

   例如:account中有nameagesex，department等。可以只取得需要的字段。

2. 获取多个资源，只用一个请求

3. 描述所有可能类型的系统。便于维护，根据需求平滑演进，添加或者隐藏字段。

restful一个接口只能返回一个资源，graphql一次可以获取多个资源。

restful用不同的url来区分资源，graphql用类型区分资源

例子

query{
    user(id:"1"){
        name
        gender
        employee(first:20){
            name
            email
        }
        father{
            telephone
        }
        son{
            school
        }
    }
}

后端

检测

参数类型与传递

1. 基本类型:StringIntFloatBoolean和ID。可以在shema声明的时候直接使用。

2. [类型]代表数组，例如:[Int]代表整型数组

   // 定义
   var Schema = buildSchema(`
   	type Account{
   		name:String,
   		age:Int,
   		location:String
   	}
   	type Film{
   		id:Int,
   		name:String,
   		poster:String,
   		price:Int
   	}
   
   	type Query{
   		getAllNames:[String],
   		getAllAges:[Int],
   		getAccountInfo:Account,
   		getNowPlayingList:[Film],
   		getFilmDetail(id:Int!):Film
   	}
   `)
   
   const root = {
       getAllNames:()=>{
           return ["kerwin","fasfas"]
       },
       getAllAges:()=>{
           return [100,2898]
       },
       getAccountInfo(){
           return {
               name:"adas",
               age:100,
               locaiton:"dalian"
           }
       },
       getNowPlayingList(){
       	return faskDb
   	},
       getFilmDetail({id}){
   		return faskDb.filter(item=>item.id === id)[0]
       }
   }
   
   var faskDb = [{
       id:1,
       name:"111",
       poster:"http://111",
       price:100
   }]
   

   // 查询
   query{
       getAllAges,
       getAllNames
   }
   

默认查询全部数据

只请求需要的数据

查询数组对象列表的部分数据

传参id进行查询

1. 和js传递参数一样，小括号内定义形参，但是注意:参数需要定义类型。

2. !(叹号)代表参数不能为空。

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

mutation

查询使用query，修改数据使用mutation

var Schema = buildSchema(`
	type File{
		id:Int,
		name:String,
		poster:String,
		price:Int
	}
	
	input FilmInput{
		name:String,
		poster:String,
		price:Int
	}
	
	type Query{
		getFilmDetail:[Film]
	}
	type Mutation{
		createFilm(input:FilmInput):Film,
		updateFilm(id:Int!,input:FilmInput):Film,
		deleteFilm(id:Int!):Int
	}	
`)

var faskDb = [{
    id:1,
    name:"111",
    poster:"http://111",
    price:100
}]

const root = {
    getNowPlayingList(){
    	return faskDb
	},
    createFilm({input}){
        var obj = {...input,id:faskeDb.length+1}
        faskDb.push(obj)
        return obj
    },
    updateFilm({id,input}){
        var current = null
        faskDb = faskDb.map(item=>{
            if(item.id === id){
                current = {...item,...input}
                return {...item,...input}
            }
            return item
        })
        return current
    },
    deleteFilm({id}){
        faskDb = faskDb.filter(item => item.id !== id)
        
        return 1 
    }
}

添加

添加后查询

修改

修改后查询

删除

删除后查询

结合数据库

客户端访问

查询数据

// 此处以fetch为例
function getData(){
    const myquery = `
	query {
		getNowplayingList{
			id,
			name
		}
	}
`
	fetch("/graphql",{
    	headers:{
	        "Content-Type":"application/json",
    	    "Accept":"application/json"
	    },
    	body:Json.stringify({
        	query:myquery
	    })
	}).then(res => res.json()).then(res=>{
    	console.log
	})
}

创建数据

function createData(){
    const myquery = `
    	mutation($input:FilmInput){
    		createFilm(input:$input){
    			id,
    			name
    		}
    	}
    `
	fetch("/graphql",{
    	headers:{
	        "Content-Type":"application/json",
    	    "Accept":"application/json"
	    },
    	body:Json.stringify({
        	query:myquery,
            variables:{
                input:{
                    name:"6666",
                    price:60,
                    poster:"http://6666"
                }
            }
	    })
	}).then(res => res.json()).then(res=>{
    	console.log
	})
}

修改数据

function undateData(){
    const myquery = `
    	mutation ($id:String!,$input:FilmInput){
    		updateFilm(id:$id,input:$input){
    			id,
    			name
    		}
    	}
    `
	fetch("/graphql",{
    	headers:{
	        "Content-Type":"application/json",
    	    "Accept":"application/json"
	    },
    	body:Json.stringify({
        	query:myquery,
            variables:{
                id:"61252",
                input:{
                    name:"6666-修改",
                    price:66,
                    poster:"http://6666-修改"
                }
            }
	    })
	}).then(res => res.json()).then(res=>{
    	console.log
	})
}