Graphql实现增删改查

95 阅读 0 评论 63 点赞

我是靠谱客的博主迅速茉莉，最近开发中收集的这篇文章主要介绍Graphql实现增删改查，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

图库结构

type.grahql
在这里插入图片描述

#学生信息
type Student {
 id: ID! #id
 name: String! @search(by: [hash regexp]) #姓名
 classes: String! @search(by: [hash regexp]) #班级
 sex：Int! @search #性别 0男 1女
 rank: Int @search #排名
 old: Int @search #年龄
}

1. 查询

1.1简单查询

//studentGraphql.vue
<script>
import gql from "graphql-tag";

//sql语句
export default {
  fragments: {
	getStudent: gql`
		query Student(
	        $filter: StudentFilter
	        $offset: Int
	        $first: Int
	      ) {
	      //计算学生总数
	        aggregateStudentCount(filter: $filter) {
	          count
	        }
	        //学生相关属性
	        queryStudent(
	          filter: $filter
	          order: { desc: created }
	          offset: $offset
	          first: $first
	        ) {
	          id
	          name
	          classes
	          sex
	          rank
	          old
	        }
	      }
	`,
	},
};
</script>

//在vue中获取
studentList:[] //存储学生列表

getStudent(){
	//传入gql的参数格式
	var studentVariables = {
		//filter对应queryStudent下的参数
        filter: {
          id: [this.id],
          name: {}
        }
      };
    if(this.name){
    	//eq为普通索引，一般赋值时需带上，即 name:{eq:"小明"}
    	//id例外，直接用[],如：id:['x01']
    	studentVariables.filter.name.eq = this.name
    }
    	
	this.$apollo.addSmartQuery("studentList", {
		//no-cache:清空缓存，刷新表格时不会因为缓存而不更新表格内容
        fetchPolicy: "no-cache",
        query: studentGraphql.fragments.getStudent,
        variables() {
          return studentVariables;
        },
        //update方法是在数据输出前，对数据格式进行处理
        update(data) {
        //data为从图库拿到的数据
          console.log("numberHistoryVariables: ");
          console.log(data);

          var result = {
            pageTotal: 0, //总条数
            tableData: [], //表数据
          };
          result.tableData = data.queryStudent
          result.pageTotal = data.queryStudent.length
          
          return result;
        },
        result(res){
        //类似ajax的success，在请求成功后回调
          console.log(res)
        },
        error(error) {
        //类似ajax的error，在请求失败后回调
          console.error("getStudent", error);
        },
      });
}

1.2 比较查询

//查询排名小于10且年龄大于15的学生 如果要等于边界值10和15，则是le和ge
var cardNumberBatchVariables = {
    filter: {
      rank: {
        lt: 10,
      },
      //and与&&类似
      and: {
        age: {
          gt: 15,
        },
      },
    },
};

1.3 分页查询

offset为偏移量，即从第几个开始返回；
first为个数，从偏移量开始展示第几个；
当offset为0，first为10，即从第一个学生开始，返回10个10个学生数据；
filter内的查询条件可以自己设定，比如name为学生名称，就可以返回指定名称的学生数据；


var studentVariables = {
	filter: {
	  name: {}, 
	},
	offset: offset //从第几个开始查
	first: pageSize //一页展示多少个
};

1.4 根据查询条件返回列表总数
设置多个filter，就不会彼此影响

	//sql语句
	getStudent: gql`
		query Student(
	        $filter: StudentFilter
	        $offset: Int
	        $first: Int
	        $filter2: StudentFilter
	        $offset2: Int
	        $first2: Int
	      ) {
	      //计算学生总数
	        aggregateStudentCount(filter: $filter) {
	          count
	        }
	        //计算名字重复的学生数量（需要在filter2内赋值）
	        repeatName:aggregateStudentCount(filter: $filter2) {
	          count
	        }
	        //学生相关属性
	        queryStudent(
	          filter: $filter
	          order: { desc: created }
	          offset: $offset
	          first: $first
	        ) {
	          id
	          name
	          classes
	          sex
	          rank
	          old
	        }
	      }
	`,

//vue中调用
var studentVariables = {
	filter:{},
	filter2: {
	  name: {'王小明'}, 
	},
	offset: offset //从第几个开始查
	first: pageSize //一页展示多少个
};

最终数据会返回repeatName字段，里面的count字段即是名字是’王小明’的学生的个数;
filter则对应aggregateStudentCount字段，如果filter为空，则返回学生的总数

2. 增加

2.1增加学生sql语句

//新增sql语句
    addPhoneNumber: gql`
      mutation addStudent(
        $addStudent: [AddStudentInput!]!
      ) {
        addStudent(input: $student) {
          student{
	          id
	          name
	          classes
	          sex
	          rank
	          old
          }
        }
      }
    `,

2.2 在vue中增加

	//学生gql入参
   var studentVariables = {
     cardNumberBatch: [
       {
         name: this.form.name,
         sex: this.form.sex,
         created: dateUtil.format(
           new Date(),
           "yyyy-MM-ddTHH:mm:ss+08:00"
         ),//图库的默认时间格式 传入时需更改好格式
       },
     ],
   };
	//gql
    this.$apollo
      .mutate({
        mutation: studentGraphql.fragments.addStudent,
        variables: studentVariables,
        update: (store, { data: { addTag } }) => {},
        optimisticResponse: {
          __typename: "Mutation",
          addTag: {},
        },
      })
      .then((data) => {
        console.log("您已新增成功！");
      })
      .catch((error) => {
        console.error("addStudent", null, null, error);
      });

3. 修改

3.1 修改sql语句

//修改sql语句
    updateStudent: gql`
      mutation updateStudent($patch: UpdateStudentInput!) {
        updateStudent(input: $patch) {
          student{
	          id
	          name
	          classes
	          sex
	          rank
	          old
          }
        }
      }
    `,

3.2 在vue中修改

//修改号码组gql入参
var updateStudentVariables = {
  patch: {
    filter: {
      id: [this.form.id],//学生对应id,唯一
    },
    set: {
      name: this.form.name,
      rank: this.form.rank1,
      updated: dateUtil.format(new Date(), "yyyy-MM-ddTHH:mm:ss+08:00"),//图库的默认时间格式
    },
  },
};

//sql语句
	this.$apollo
	   .mutate({
	     mutation: studentGraphql.fragments.updateStudent,
	     variables: updateStudentVariables,
	     update: () => {},
	     optimisticResponse: {
	       __typename: "Mutation",
	       addTag: {},
	     },
	   })
	   .then((data) => {
	     console.log("您已修改成功！")
	   })
	   .catch((error) => {
	     console.error("updateStudent", null, null, error);
	   });

4. 删除

4.1 删除sql语句

//删除号码
  deleteStudent: gql`
    mutation deleteStudent($filter: StudentFilter!) {
      deleteStudent(filter: $filter) {
        msg
        student{
          id
          name
          classes
          sex
          rank
          old
         }
      }
    }
  `,

4.2 在vue中删除

	//删除学生sql入参
      var deleteStudentVariables = {
        filter: {
          id: ids,//可以传入一个数组,如['0x1','0x2']
        },
      };
      
	//删除gql
   this.$apollo
     .mutate({
       mutation: studentGraphql.fragments.deleteStudent,
       variables: deleteStudentVariables,
       update: () => {},
       optimisticResponse: {
         __typename: "Mutation",
         addTag: {},
       },
     })
     .then((data) => {
       console.log("您已删除成功！");
     })
     .catch((error) => {
       console.error("deleteStudent", null, null, error);
     });