Vue+GraphQL初試験
8401 ワード
package.json
"dependencies": {
"apollo-server-koa": "^1.3.6",
"graphql": "^0.13.2",
"graphql-import": "^0.6.0",
"graphql-tools": "^3.0.2",
"koa": "^2.5.1",
"koa-bodyparser": "^4.2.1",
"koa-router": "^7.4.0",
"koa-websocket": "^5.0.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
server.js
import koa from 'koa'
import koaRouter from 'koa-router'
import koaBody from 'koa-bodyparser'
import websocketify from 'koa-websocket'
import { graphqlKoa, graphiqlKoa } from 'apollo-server-koa'
import { makeExecutableSchema } from 'graphql-tools'
const app = websocketify(new koa())
const router = new koaRouter()
const PORT = 3000
// fake data
const moments = [
{
user: {
id: 1000,
name: ' ',
avatar: 'http://imgsrc.baidu.com/imgad/pic/item/42a98226cffc1e17d31927154090f603738de974.jpg'
},
main: {
content: ' ',
pics: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529219875063&di=bc0bcc78ae800c1c21c198f52697f515&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3ccd53548ea0be93901203f9223.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529219893624&di=8d9e418df27e1fdb6afb1d993801a980&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F3801213fb80e7beca9004ec5252eb9389b506b38.jpg'
]
},
comments: [
{
user: {
id: 233122,
name: ' '
},
reply: ' '
}
]
}
]
const typeDefs = `
type Query {
moments: [Moment]
}
type Mutation {
addComment(
entity: Add_Comment
) : Comment
}
type Moment {
user: User
main: Main
comments: [Comment]
}
type User {
id: Int
name: String
avatar: String
}
type Comment {
user: User
reply: String
}
type Main {
content: String
pics: [String]
}
input Add_User {
id: Int
name: String
}
input Add_Comment {
user: Add_User
reply: String
}
# graphqlf RootQuery RootMutation
schema {
query: Query
mutation: Mutation
}
`
const resolvers = {
Query: {
moments () {
return moments
}
},
Mutation: {
addComment (_, { entity }, unknown, context) {
console.log(entity)
moments[0].comments.push(entity)
return entity
}
}
}
const schema = makeExecutableSchema({
typeDefs,
resolvers
})
// koaBody is needed just for POST.
router.post('/graphql', koaBody(), graphqlKoa({ schema: schema }))
// router.get('/graphql', graphqlKoa({ schema: schema }))
router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }))
async function responseMiddleware(ctx, next) {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:8080')
ctx.set('Access-Control-Allow-Methods', 'POST,OPTIONS')
ctx.set('Access-Control-Allow-Headers', 'authorization,content-type')
// ctx.set('Access-Control-Allow-Credentials', 'true')
await next()
}
app.use(responseMiddleware)
app.use(router.routes())
app.use(router.allowedMethods())
app.ws.use(responseMiddleware)
app.ws.use(router.routes())
app.ws.use(router.allowedMethods())
app.listen(PORT)
GraphQLの概要
GraphQL基本構文特性
fields,alias,arguments,fragments,variables,directives,inline fragmentsを含む
GraphQLタイプシステム
主にRootQuery+RootMutationの2種類のエントリタイプ(操作)にRootValue(resolvers)を加えてGraphQL Schemaを構成する.(ここでgraphql-toolsを使用するのは、すべてのタイプを1つの文字列に定義するためで、その後.graphqlファイルに移動し、graphql-importでインポートします)
GraphQLタイプシステム内蔵ベースタイプ
Int:符号付き32ビット整数Float:符号付き二重精度浮動小数点値String:UTF-8文字シーケンスBoolean : true or false ID:IDスカラータイプは、通常、オブジェクトまたはキャッシュ内のキーとして再取得するために使用されるユニークな識別子(UUIDと同様)を表す.IDタイプはStringと同様にシーケンス化されます.enum Episode {
NEWHOPE
EMPIRE
JEDI
}配列タイプ(Array Type)リストをかっこ
[]でマークインタフェースタイプ(Interface Type)javaのinterfaceメカニズムと似た抽象的なタイプです.
ユニオンタイプ
{
search(text: "an") {
... on Human {
name
height
}
... on Droid {
name
primaryFunction
}
... on Starship {
name
length
}
}
}
入力タイプ(Input Type)前述したすべてのTypesとは対照的に、パラメータなしで
mutationsのcaseを伝達するために主に使用される唯一の入力タイプでもある.ビルトイン修飾子
:空でないことを示します.以下のquery DroidById($id: ID!) {
droid(id: $id) {
name
}
}GraphQL動作原理
GraphQLの各クエリーフィールドは、サブタイプを返す親タイプ関数です.各タイプのフィールドは、
!関数によってサポートされ、フィールドが実行されると、応答のresolverが呼び出され、結果がreturnされる.フィールド生成結果が
resolverの値(文字列や数字など)の場合、実行は完了します.そうでなければ、 は、結果が の値になるまで、対応する解析器を実行する.GraphQL基本データストリーム
各GraphQLサービス・エンド・アプリケーションの最上位レベルには必ず
があり、通常はRootまたはQueryタイプであり、次いでこのフィールドのプリセット (同期または非同期)が実行され、各フィールドの解析結果はキー値マッピングに配置され、フィールド名(または別名)がキーとなり、解析器の値が値となり、このプロセスはクエリー・フィールドの から返される.Queryタイプの まで、最終的に を生成してクライアントに戻るVueエンジニアリングアクセスGraphQL
vue-cli 3をインストールします.x
npm i -g @vue/cliイニシャルエンジニアリング
vue create [project-name]apolloプラグインの導入
cd [project-name]
vue add apolloFriendCircle.vue
{{item}}
import gql from 'graphql-tag'
const QUERY_LIST = gql`
query {
moments {
user {
id
name
avatar
}
main {
content
pics
}
comments {
user {
id
name
}
reply
}
}
}
`
export default {
data () {
return {
moments: [],
comment: {
user: {
id: (Math.random() * 10000).toFixed(0),
name: ' '
},
reply: ''
}
}
},
apollo: {
moments: {
query: QUERY_LIST
}
},
methods: {
addComment () {
this.$apollo.mutate({
mutation: gql`
mutation addComment($comment: Add_Comment) {
addComment(entity: $comment) {
user {
id
name
}
reply
}
}
`,
variables: {
comment: this.comment
},
update: (store, { data: { addComment } }) => {
// Read the data from our cache for this query.
const data = store.readQuery({ query: QUERY_LIST })
// set first moment's comment
data.moments[0].comments.push(addComment)
// Write our data back to the cache.
store.writeQuery({ query: QUERY_LIST, data })
}
})
}
}
}
関連する知識点はRootです.Query,Root_Mutation,variablesおよびstore cache
cache
そのコアメカニズムには、次の2つの点が含まれています.
this.$apollo.mutate(options)optionsにはupdateコールバックがあり、データに正常に応答した後にトリガーされ、
によって生成されたstoreを直接読み取り、操作することができる.上記の例では、このコールバック同期を使用してキャッシュおよびUIを更新する注意:バインドされた変数はすべて直接変更できません.内部ではObjectを使用します.freezeはオブジェクトをフリーズし、直接削除できません.
発表期間は2018年06月17日
清風0 o 0
出典:掘金転載が必要な場合は原作者に連絡してください