GraphQL接口前端实现（graphql-request）

GraphQL

前端

基于graphql-request三方实现GraphQL在前端应用。
参考：
1.https://github.com/prisma-labs/graphql-request
2.https://graphql.cn/code

1.创建graph_api.js文件,

const {GraphQLClient } = require('graphql-request')
//url:例如http://localhost:port/chantor
const graphQLClient = new GraphQLClient(URL, {})
export function graph_request_test(mutation,variables) {
    return graphQLClient.request(mutation,variables)
}

2.创建index.vue文件

...

<script>
    import {graph_request_test} from '@/api/graph_api'  //graph_api.js的路径
    import {gql} from 'graphql-request'
    
    export default{
        data():{
        	return{
        		stu_id:123,
        		stu_name:"chantor"
    		}
    	},
        methods:{
            query_stu(){
                //根据学生id、姓名，查询学生性别、年龄、院系
            	var query=gql`
					query($stu_id:Int!,$stu_name:String){
						stu_infos(stu_id:$stu_id,stu_name:$stu_name){
							sex
							age
							department
						}
					}`
            	var variables={"stu_id":this.stu_id,"stu_name":this.stu_name}
                
                graph_request_test(query,variables).then(response=>{
                    //todo
                })
                
                }
        }
    }
    
</script>