GraphQL 結合Apollo 以及vue的例子

graphql 一些關鍵概念包含 type，schema， query， mutation等，下面會分別做一下簡單的說明，具體還是要結合實際**進行分析。

所謂的查詢就是向服務端獲取你要想的資料，比如我要查所有的使用者列表

// 先定義 user 資料結構 type user // query 查詢 query

get /api/v1/userlist get /api/v1/userlist/ :id/

❄️ 值得注意的是，查詢欄位時，是並行執行，而變更欄位時，是線性執行，乙個接著乙個。

比如說，我要變更title 和 author

type mutation

解析 mutationtitleauthor

mutation:}}
,}

在 graphql 中，schema 主要是用來描述資料的形態，哪些資料能被查詢到，所以在 schema 中主要定義可用資料的資料型別。總之：要查到的資料都必須要在 schema 中進行定義，所以這裡是需要寫很多 type 的，這裡還需要統一定義 query 和 mutation，也就是要把上面那些定位全部放到這裡來

type user type query type mutation

⬇️基礎的內容大概就是醬紫，下面開始來一波實戰操作

apollo-graphql 是基於 graphql 封裝的一種實現，它可以在服務上進行分層，包括 rest api 和資料庫，它包含客戶端和服務端，還有 gui 開發工具，讓開發人員可以快速上手進行開發。

?具體想法

這邊採用apollo-server-express快速搭建服務端

首先安裝依賴,這個例子只需安裝以下三個工具

yarn add apollo-server-express express graphql

對於apollo-server，比較基本的就是要搞清楚schema和resolvers應該如何定義。

?最重要的其實就是

const server =
newapolloserver()
;

定義好typedefs(schema)和resolvers，便可快速啟動

type article type articlecontent type category type query type mutation

把這些 schema 轉換為 typedefs, 需要用到

const = require("apollo-server-express");

module.exports = gql （code...）;

//部分**：
const resolvers =
) 的文章`);}
if(article.isread)
article.isread =
true
;return article;}}
};

用 vue 來搭建專案

yarn add vue-apollo graphql apollo-boost

import apolloclient from "apollo-boost";

import vueapollo from "vue-apollo";

vue.use(vueapollo);

vue.config.js
module.exports =
};

import gql from "graphql-tag"
;const fetchdatagql = gql`
getallcategories }`;
export default;}
,  apollo:};
}}};

GraphQL 結合Apollo 以及vue的例子

apollo學習筆記二十 apollo 感知（下）

GraphQL 標量型別

GraphQL開發整理

GraphQL 結合Apollo 以及vue的例子

apollo學習筆記二十 apollo 感知（下）

GraphQL 標量型別

GraphQL開發整理

相關推薦