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中。

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.dataPost = data.posts;}
  }
  

Mutation(变更)

变更中以增加为例:

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

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

• mutation.js文件内容

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

• vue文件内容

  <template><div><ul><el-input placeholder="请输入书籍名称" v-model="postName"></el-input><el-input placeholder="请输入作者" v-model="name"></el-input><el-input placeholder="请输入年龄" v-model="age"></el-input><el-input placeholder="请输入邮箱" v-model="email"></el-input><el-input placeholder="是否使用" v-model="isUse"></el-input><el-button type="primary" @click="savePost">保存</el-button></ul></div>
  </template>

  • 写法一

    //引入增加数据的文件
    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}});