上篇給大家介紹了Java 使用 Graphql 搭建查詢服務詳解。這里我們講講如何在Vue中使用GraphQL。
創(chuàng)新互聯長期為上千客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為舞鋼企業(yè)提供專業(yè)的成都網站建設、做網站，舞鋼網站改版等技術服務。擁有10年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
1. 初始化vue項目
npm install -g @vue/cli vue create vue-apollo-demo
選擇默認cli的默認模板就可以了
添加 /src/graphql/article.js 、 /src/utils/graphql.js 兩個文件。
├── node_modules └── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── home.js │ ├── components │ │ └── HelloWorld.js │ ├── graphql │ │ ├── article.js │ ├── utils │ │ ├── graphql.js │ ├── App.vue │ └── main.js ├── package.json └── package-lock.json
2. 安裝Apollo客戶端
vue-apollo 可以幫助你在應用中使用GraphQL的一套工具。
你可以使用Apollo Boost或 直接使用 Apollo Client(需要更多配置工作)。
name這里用 Apollo Boost 就可以了，如果你想要更細粒度的控制，可以去看 Vue Apollo 的文檔。
Apollo Boost 是一種零配置開始使用 Apollo Client 的方式。它包含一些實用的默認值，例如我們推薦的 InMemoryCache 和 HttpLink ，它非常適合用于快速啟動開發(fā)。
將它與 vue-apollo 和 graphql 一起安裝：
npm install --save vue-apollo graphql apollo-boost
3. 創(chuàng)建ApolloClient實例
在你的應用中創(chuàng)建一個 ApolloClient 實例：
重慶分公司
重慶分公司
/src/utils/graphql.js
import ApolloClient from 'apollo-boost';
const apolloClient = new ApolloClient({
// 你需要在這里使用絕對路徑
uri: 'http://127.0.0.1:7001/graphql'
})
export default apolloClient;4. 添加GraphQL的操作實例
/src/utils/article.js
import gql from 'graphql-tag'
import apolloClient from '../utils/graphql'
export function getArticleList(params) {
return apolloClient.query({
query: gql`query ($first: ID) {
articleList(first: $first){
id
title
content
author {
name
age
}
}
}`,
variables: params
})
}
export function createArticle(params) {
return apolloClient.mutate({
mutation: gql`mutation ($title: String, $content: String, $author: AddAuthor) {
addArticle(title: $title, content: $content, author: $author){
id
title
content
author {
age
name
}
}
}`,
variables: params
})
}5. 調試
/src/App.vue文章列表
- 文章名稱: {{ v.title }}----------------({{ v.author.name }})
添加文章
標題：
作者名稱:
作者年齡:
文章內容:
效果如下:
總結
以上所述是小編給大家介紹的vue中使用GraphQL的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
