apollo在Vue中的应用
1.在schema.graphql中的模拟数据
scalar JSON
scalar Upload
directive @cacheControl(
maxAge: Int,
scope: CacheControlScope
) on OBJECT | FIELD_DEFINITION
enum CacheControlScope {
PUBLIC
PRIVATE
}
type File {
id: ID!
path: String!
filename: String!
mimetype: String!
encoding: String!
}
type Query {
hello(name: String): String!
uploads: [File]
molist(name:String,content:String): File!
}
type Mutation {
singleUpload (file: Upload!): File!
start (name: String):String!
}
2.在resolvers.js中
import GraphQLJSON from 'graphql-type-json'
export default {
JSON: GraphQLJSON,
Query: {
hello: (root, { name }) => {
return `Hello ${name || 'World'}!`
},
uploads: (root, args, { db }) => {
return db.get('uploads').value()
},
molist: (root, args, context) => {
return { path: 'qwe', encoding: 'nande1' }
}
},
Mutation: {
singleUpload: (root, { file }, { processUpload }) => {
return processUpload(file)
},
start: (root, args, context) => {
return '男士'
}
}
}
3。在api中Start.gql中
mutation start($label: String!) {
start(name: $label)
}
4。在Molist.gql中
query molist($name:String,$content:String){
molist(name:$name,content:$content){
encoding
}
}
5.在home.vue中调用Apollo
<script>
import StartQL from '@/api/graphql/Start.gql'
import MolistQl from '@/api/graphql/Molist.gql'
export default {
components: {},
// filters: {},
// props: {},
data () {
return {
// 响应式布局栅栏设置
xs: 24,
sm: 12,
gutter: 20,
// el-card 配置
shadow: 'never',
dialogVisible: false
}
},
computed: {},
// created () {},
mounted () {
this.addTag()
this.add()
},
methods: {
async addTag () {
// Call to the graphql mutation
const result = await this.$apollo.mutate({
// Query
mutation: StartQL,
// Parameters
variables: {
label: '女士'
}
})
console.log(result)
},
async add () {
// Call to the graphql mutation
const result = await this.$apollo.query({
// Query
query: MolistQl,
// Parameters
variables: {
name: '女士',
content: 'nande'
}
})
console.log(result)
}
}
}
</script>