Prisma(六)——Prisma ➕ Apollo ➕ Vue(vue中使用prisma)

到目前为止，我们知道Prisma是一个后端框架，那如何与vue项目结合起来呢❓嗯，没错，是Apollo。

vue-apollo虽然没有react-apollo出名，但是也是很好用的，我们一起来看看vue-apollo👇👇👇

vue-apollo

安装

npm install vue-apollo graphql apollo-client apollo-link-http

创建ApolloClient实例

//导入安装的插件
import VueApollo from 'vue-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'

//连接API的地址
const httpLink = createHttpLink({
  // 你需要在这里使用绝对路径（后端框架中的prisma.yml文件中endpoint地址）
  uri: 'http://localhost:4466',
})

// 创建ApolloClient实例
const apolloClient = new ApolloClient({
  link: httpLink
})

创建 VueApollo 实例

// Apollo provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

添加到应用程序中

new Vue({
  router,
  store,
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

以上内容在main.js中。

vue中的使用

vue文件内容

<template>
  <div>
    <el-table :data="dataUser" style="width: 100%" max-height="250">
      <el-table-column fixed prop="name" label="书籍" align="center">
      </el-table-column>
      <el-table-column prop="author.name" label="作者" align="center">
      </el-table-column>
      <el-table-column prop="author.age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="author.email" label="邮箱" align="center">
      </el-table-column>
      <el-table-column label="是否使用" align="center">
        <template slot-scope="props">
          <p> {{props.row.author.isUse===true?'是':'否'}} </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleSave">增加</el-button>
          <el-button size="mini" type="primary" @click="handleEdit( scope.row,scope.$index)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog :title="dialogType==='add'?'增加':'编辑'" :visible.sync="dialog">
      <el-form :model="form">
        <el-form-item label="书籍：">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者：">
          <el-input v-model="form.author.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="form.author.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="form.author.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否使用：">
          <el-input v-model="form.author.isUse==true?'是':'否'" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="savePost" v-if="dialogType==='add'">确 定</el-button>
         <el-button type="primary" @click="saveEditPost" v-else>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

Query(查询)

使用this.$apollo.query发送查询语句。
vue项目中src目录下新建文件夹（graphql）,此文件夹下新建文件（query.js）。

query.js文件内容

import gql from "graphql-tag";
const apollo = {
  posts: gql `
      query {
        posts{
          _id,
          author{
            _id,
            name,
            age,
            email,
            isUse
          }
          name
        }
      }
    `
}
export default apollo

vue文件

// 引入查询文件
import queryPost from "../graphql/query";

methods: {
    async getPosts() {
      let { data } = await this.$apollo.query({ query: queryPost.posts });
      this.dataUser = data.posts;   //表格中渲染的数据
    }
}

Mutation(变更)

使用 this.$apollo.mutate发送查询语句。

vue项目中src目录下新建文件夹（graphql）,此文件夹下新建文件（mutation.js）。

mutation.js文件内容

import gql from "graphql-tag";
const apollo =  gql `
  mutation createPost($data:PostCreateInput!) {
    createPost(data:$data){
      name,
      author{
        name,
        age,
        email,
        isUse
      }
    }
}
`
export default apollo

vue文件中的使用

写法一

//引入增加数据的文件
import mutationPost from "../graphql/mutation";

async savePost() {
  let {data}=await this.$apollo.mutate({
    mutation: mutationPost,
    variables: {
      data: {
        name: this.postName,
        author: {
          create: {
            name:this.name,
            age: Number(this.age),
            email: this.email,
            isUse: this.isUse === "是" ? true : false
          }
        }
      }
    }
  });
  console.log(data.createPost);
}

写法二

this.$apollo.mutate({
    mutation: mutationPost,
    variables: {
      data: {
        name: this.postName,
        author: {
          create: {
            name:this.name,
            age: Number(this.age),
            email: this.email,
            isUse: this.isUse === "是" ? true : false
          }
        }
      }
    },
    update: (store, { data: { createPost } }) => {
      console.log(createPost);   //注意：此处直接打印createPost，若打印data是undefined
    }
  });

mutation.js文件内容

import gql from "graphql-tag";
const updatePostApollo = gql `
   mutation updatePost($data:PostUpdateInput!,$where: PostWhereUniqueInput!) {
      updatePost(data:$data,where:$where){
          name,
          author{
            name,
            age,
            email,
            isUse
          }
        }
    }
`
export default updatePostApollo

vue文件中的使用

//引入文件
import  updatePostApollo  from "../graphql/mutation";

async saveEditPost() {
  let { data } = await this.$apollo.mutate({
    mutation: updatePostApollo,
    variables: {
      where: {_id:this.form._id},    //修改的条件
      data: {    //修改的内容
        name: this.form.name,
        author: {
          update: {
            name: this.form.author.name,
            age: Number(this.form.author.age),
            email: this.form.author.email,
            isUse: this.form.author.isUse === "是" ? true : false
          }
        }
      }
    }
  });
},

效果图

mutation.js文件内容

import gql from "graphql-tag";
const deletePostApollo = gql `
   mutation deletePost($where: PostWhereUniqueInput!) {
    deletePost(where:$where){
          name,
          author{
            name,
            age,
            email,
            isUse
          }
        }
    }
`
export default deletePostApollo

vue文件中的使用

//引入文件
import  deletePostApollo  from "../graphql/mutation";

async handleDelete(item, index) {
  if (confirm("你确定要删除吗？")) {
    let { data } = await this.$apollo.mutate({
      mutation: deletePostApollo,
      variables: { where: { _id: item._id } }
    });
  }
  this.dataUser.splice(index, 1);
}

来源：CSDN

作者：smile@qingqing

链接：https://blog.csdn.net/weixin_43363871/article/details/104041197

标签

form

input

apollo

graphql

vue

table