با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

در این مقاله وبلاگی ایجاد خواهید کرد که از سرور مجازی GraphQL استفاده میکند. ما برنامه وبلاگ را با استفاده از کلاینت Apollo و Vue می سازیم. می توانید سرور مجازی GraphQL را بگیرید تا بتوانید همراه با آموزش آن را دنبال کنید.
فعال کردن CORS
سرور مجازی GraphQL با AdonisJS ساخته شده است. AdonisJS بسته ای را ارائه می دهد که می توانیم از آن برای مدیریت اشتراک گذاری مقطعی منبع (CORS) در API استفاده کنیم. به طور پیش فرض CORS در AdonisJS شروع میشود ، بنابراین باید آن را فعال کنیم. برای فعال کردن CORS در برنامه AdonisJS ، origin را به صورت زیر در config/cors.js روی true تنظیم می کنیم:
config/cors.js
origin: true
اگرچه سرور مجازی GraphQL کلون شده قبلاً CORS را فعال کرده است ، اما ذکر آن خالی از لطف نیست.
راه اندازی سرور مجازی GraphQL
از آنجا که برنامه وبلاگ ما از سرور مجازی GraphQL استفاده می کند ، باید سرور مجازی را شروع کرده و آن را برای بقیه آموزش در حالت اجرا نگه داریم. برای شروع ، وارد دیرکتوری پروژه سرور مجازی GraphQL می شویم و دستور زیر را اجرا می کنیم:
⦁ $ adonis serve –dev
⦁
با این کار سرور مجازی GraphQL شروع به کار می کند.

بقیه آموزش بر این فرض است که شما قبلاً سرور مجازی GraphQL را راه اندازی کرده اید و در حال اجرا است.
با توجه به این مسئله ، بیایید شروع به ساخت برنامه وبلاگ خود کنیم.
ایجاد یک برنامه Vue
با ایجاد یک برنامه جدید Vue با استفاده از Vue CLI شروع خواهیم کرد:
⦁ $ vue init webpack graphql-blog-app
⦁
⦁ $ // select `Y` to use Vue router
⦁
با این کار یک برنامه جدید Vue با نام Graphql-blog-app ایجاد می شود و متعلقات آن را نصب می کند.
نصب بسته های لازم
با ایجاد برنامه ، می توانیم به سراغ نصب بسته های لازم برای ساخت برنامه وبلاگ GraphQL برویم:
⦁ $ cd graphql-blog-app
⦁
⦁ $ npm install –save vue-apollo@next graphql apollo-client apollo-link apollo-link-context apollo-link-http apollo-cache-inmemory graphql-tag
بیایید به سرعت روی همه بسته ها مروری کنیم:
⦁ vue-apollo: یکپارچه سازی Apollo / GraphQL برای VueJS است. ما آخرین نسخه این افزونه را نصب می کنیم که به ما امکان می دهد از تمام ویژگی های فوق العاده ای که همراه با کلاینت آپولو 2.0 وجود دارد استفاده کنیم.
⦁ graphql: اجرای مرجع GraphQL برای JavaScript .
⦁ apollo-client: یک کلاینت ذخیره سازی GraphQL ، جامع و آماده تولید ، برای هر سرور مجازی یا چارچوب UI .
⦁ apollo-link: یک رابط استاندارد برای اصلاح جریان کنترل درخواستهای GraphQL و واکشی نتایج GraphQL .
⦁ apollo-link-context: برای تنظیم زمینه ای روی عملکرد شما استفاده میشود ، که توسط سایر پیوندها در پایین زنجیره استفاده می شود.
⦁ apollo-link-http: برای گرفتن نتایج GraphQL از طریق شبکه با استفاده از واکشی HTTP استفاده می شود.
⦁ apollo-cache-inmemory: اجرای حافظه پنهان برای آپولو Client 2.0.
⦁ Graphql-tag: برچسب تحت اللفظی قالب JavaScript که نمایش داده های GraphQL را تجزیه می کند.
راه اندازی Vue Apollo
در مرحله بعد ، اجازه دهید بسته ها را برای استفاده قرار دهیم. ما با ایجاد یک نمونه ApolloClient و نصب افزونه VueApollo شروع خواهیم کرد. src / main.js را باز کنید و کد زیر را به آن اضافه کنید:
src/main.js
import { ApolloClient } from ‘apollo-client’
import { HttpLink } from ‘apollo-link-http’
import { InMemoryCache } from ‘apollo-cache-inmemory’
import VueApollo from ‘vue-apollo’

const httpLink = new HttpLink({
// URL to graphql server, you should use an absolute URL here
uri: ‘http://localhost:3333/graphql’
})

// create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})

// install the vue plugin
Vue.use(VueApollo)

یک نمونه جدید از httpLink را با URL (http: // localhost: 3333 / Graphql) سرور مجازی GraphQL خود ایجاد می کنیم. سپس با استفاده از httpLink ایجاد شده در بالا ، یک کلاینت Apollo ایجاد می کنیم و مشخص می کنیم حافظه پنهان را می خواهیم. در آخر ، افزونه Vue Apollo را نصب می کنیم.
در مرحله بعدی، بیایید یک آبجکت apolloProvider ایجاد کنیم که در مؤلفه اصلی خود آن را مشخص خواهیم کرد:
src/main.js
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})

// update Vue instance by adding `apolloProvider`
new Vue({
el: ‘#app’,
router,
apolloProvider,
template: ‘<App/>’,
components: { App }
})

ما نمونه جدیدی از افزونه Vue Apollo را با استفاده از apolloClient ایجاد شده به عنوان کلاینت پیش فرض مان ایجاد می کنیم. در آخر ، با اضافه کردن آن در نمونه Vue ، از آبجکت apolloProvider استفاده می کنیم ، به همان روشی که از روتر Vue استفاده خواهیم کرد.
اضافه کردن Bulma
به منظور استفاده از این آموزش ، از Bulma CSS استفاده خواهیم کرد. بنابراین ، اجازه دهید آن را اضافه کنیم. index.html را باز کنید و به شرح زیر به روز کنید:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>GraphQL Blog App</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css”>
</head>
<body>
<div id=”app”></div>
<!– built files will be auto injected –>
</body>
</html>

ما Bulma را در CDN ارجاع می دهیم.
حذف کد استفاده نشده
هنگامی که برنامه Vue خود را ایجاد کردیم که در این آموزش استفاده نمی کنیم ، برخی از فایل ها و کد ها هستند که همراه آن می آیند. باید آنها را حذف کنیم تا در برنامه ما دخالت نکنند. مؤلفه Hello را حذف کرده و تمام منابع آن را از src / router / index.js حذف کنید.
اضافه کردن چیدمان مستر
این وبلاگ از یک طرح کلی در صفحات خود استفاده می کند. در این حالت ، بیایید یک چیدمان تعریف کنیم که همه صفحات از آن استفاده کنند. برای انجام این کار ، src / App.vue را باز کنید و به شرح زیر آپدیت کنید:
src/App.vue
<template>
<div id=”app”>
<nav class=”navbar is-primary” role=”navigation” aria-label=”main navigation”>
<div class=”container”>
<div class=”navbar-brand”>
<router-link class=”navbar-item” to=”/”>Blog App</router-link>

یک هدر اضافه می کنیم که همه صفحات از آن استفاده خواهند کرد.
ثبت نام کاربر
کاربران باید بتوانند در برنامه وبلاگ ما عضو شوند. ما یک مؤلفه SignUp ایجاد خواهیم کرد که آن را مدیریت کند. بنابراین ، در src/components یک پوشه ادمین جدید ایجاد کنید. تمام مؤلفه های مربوط به ادمین در این پوشه به صورت داخلی ایجاد می شوند.
قبل از ایجاد مؤلفه SignUp ، اجازه دهید یک فایل اختصاصی ایجاد کنیم که تمام نمایشگرها و جهش های GraphQL ما را در خود نگه می دارد. ما این فایل را مستقیماً در داخل src ایجاد خواهیم کرد. یک فایل Graphql.js را در داخل src ایجاد کنید و کد زیر را درون آن پیست کنید:
src/graphql.js
import gql from ‘graphql-tag’

export const SIGNUP_MUTATION = gql`mutation SignupMutation($username: String!, $email: String!, $password: String!) {
createUser(
username: $username,
email: $email,
password: $password
) {
id
username
email
}
}`

این جهش GraphQL است که ایجاد کاربر جدید در سرور مجازی GraphQL ما را کنترل می کند. نام کاربری ، ایمیل و رمز عبور کاربر را می گیرد. این متغیرها از مؤلفه SignUp منتقل می شوند.
در مرحله بعد ، بیایید مؤلفه SignUp را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل SignUp.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/SignUp.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-4 is-offset-4″>
<h2 class=”title has-text-centered”>Signup</h2>

<form method=”POST” @submit.prevent=”signup”>
<div class=”field”>
<label class=”label”>Username</label>

<div class=”field”>
<label class=”label”>E-Mail Address</label>

<div class=”field”>
<label class=”label”>Password</label>

<p class=”control”>
<button class=”button is-primary is-fullwidth is-uppercase”>SignUp</button>
</p>
</form>
</div>
</div>
</section>
</template>

export default {
name: ‘SignUp’,
data () {
return {
username: ”,
email: ”,
password: ”
}
},
methods: {
signup () {
this.$apollo
.mutate({
mutation: SIGNUP_MUTATION,
variables: {
username: this.username,
email: this.email,
password: this.password
}
})
.then(response => {
// redirect to login page
this.$router.replace(‘/login’)
})
}
}
}
</script>

این مؤلفه فرم ثبت نام را برای کاربران ارائه می دهد. پس از ارسال فرم ، یک روش signup فراخوانی می شود. در روش signup ، از روش mutate موجود در this.$apollo استفاده می کنیم (از افزونه Vue Apollo. از جهش SIGNUP_MUTATION که قبلاً ایجاد شده استفاده می کنیم و متغیرهای لازم را می گذرانیم. پس از موفقیت در روند ثبت نام (یعنی وقتی کاربر ایجاد شد) کاربر را به صفحه ورود (که به زودی ایجاد خواهیم کرد) هدایت می کنیم.
اضافه کردن مسیر ثبت نام
src / router / index.js را باز کنید ، و کد زیر را به آن اضافه کنید:
src/router/index.js
import SignUp from ‘@/components/Admin/SignUp’

// add these inside the `routes` array
{
path: ‘/signup’,
name: ‘SignUp’,
component: SignUp
},

حال هنگامی که از مسیر /signup بازدید می کنیم ، باید فرم ثبت نام خود را مانند تصویر زیر ببینیم:

ورود کاربر
بیایید به کاربران امکان ورود به سیستم را اضافه کنیم. درست مانند کاری که با استفاده از کاربر انجام دادیم ، اجازه دهید ابتدا جهش GraphQL را ایجاد کنیم. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const LOGIN_MUTATION = gql`mutation LoginMutation($email: String!, $password: String!) {
login(
email: $email,
password: $password
)
}`

این جهش GraphQL دسترسی کاربر را به سرور مجازی GraphQL ما مدیریت می کند. ایمیل و رمز عبور کاربر را می گیرد.
سپس ، درون پوشه ادمین، یک فایل LogIn.vue ایجاد کنید و کد زیر را درون آن پیست کنید:
src/components/Admin/LogIn.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-4 is-offset-4″>
<h2 class=”title has-text-centered”>Login</h2>

<form method=”POST” @submit.prevent=”login”>
<div class=”field”>
<label class=”label”>E-Mail Address</label>

<div class=”field”>
<label class=”label”>Password</label>

<p class=”control”>
<button class=”button is-primary is-fullwidth is-uppercase”>Login</button>
</p>
</form>
</div>
</div>
</section>
</template>

export default {
name: ‘LogIn’,
data () {
return {
email: ”,
password: ”
}
},
methods: {
login () {
this.$apollo
.mutate({
mutation: LOGIN_MUTATION,
variables: {
email: this.email,
password: this.password
}
})
.then(response => {
// save user token to localstorage
localStorage.setItem(‘blog-app-token’, response.data.login)

// redirect user
this.$router.replace(‘/admin/posts’)
})
}
}
}
</script>

این مؤلفه فرم ساده ای را برای ورود کاربران فراهم می کند. پس از ارسال فرم ، یک روش login فراخوانی می شود. در روش login ، ما از روش mutate استفاده می کنیم. ما از جهش LOGIN_MUTATION که قبلاً ایجاد شده است استفاده می کنیم و از متغیرهای لازم عبور می کنیم. پس از موفقیت در فرآیند ورود به سیستم ، توکنی را که از سرور مجازی GraphQL دریافت کرده ایم در ذخیره سازی محلی سیو کرده و کاربر را هدایت می کنیم.
افزودن مسیر ورود
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import LogIn from ‘@/components/Admin/LogIn’

// add these inside the `routes` array
{
path: ‘/login’,
name: ‘LogIn’,
component: LogIn
},

حال وقتی از مسیر /login بازدید می کنیم ، باید فرم ورود به سیستم را مانند تصویر زیر مشاهده کنیم:

ایجاد مؤلفه منو
قبل از شروع به اشغال قسمتهای ادمین وبلاگ خود ، بیایید یک مولفه منو ایجاد کنیم که به عنوان منوی پیمایش نوار کناری ارائه شود. در پوشه ادمین ، یک فایل Menu.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/Menu.vue
<template>
<aside class=”menu”>
<p class=”menu-label”>Post</p>
<ul class=”menu-list”>
<li>
<router-link to=”/admin/posts/new”>New Post</router-link>
</li>
<li>
<router-link to=”/admin/posts”>Posts</router-link>
</li>
</ul>
<p class=”menu-label”>User</p>
<ul class=”menu-list”>
<li>
<router-link to=”/admin/users”>Users</router-link>
</li>
</ul>
</aside>
</template>

این به سادگی پیوندهایی را به برخی بخش های ادمین برنامه وبلاگ ارائه می دهد.
نمایش کاربران
در بخش ادمین ، می خواهیم بتوانیم لیست کاربرانی که ایجاد شده اند را ببینیم. برای همین ، یک مولفه کاربران ایجاد کردیم. اما اول ، بیایید جستار GraphQL را بنویسیم که تمام کاربرهای ایجاد شده را منتقل می کند. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const ALL_USERS_QUERY = gql`query AllUsersQuery {
allUsers {
id
username
email
}
}`
این جستار GraphQL همه کاربران را از سرور مجازی GraphQL ما دریافت می کند.
در مرحله بعد ، بیایید مؤلفه Users را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل Users.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/Users.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Users</h2>

<table class=”table is-striped is-narrow is-hoverable is-fullwidth”>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for=”user in allUsers”
:key=”user.id”>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
<router-link :to=”`/admin/users/${user.id}`”>View</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</template>

export default {
name: ‘Users’,
components: {
Menu
},
data () {
return {
allUsers: []
}
},
apollo: {
// fetch all users
allUsers: {
query: ALL_USERS_QUERY
}
}
}
</script>

ما از مؤلفه Menu ایجاد شده قبلی استفاده می کنیم. سپس داده های خود را تعریف می کنیم که پس از بدست آوردن اطلاعات از سرور مجازی GraphQL جمع می شوند. در درون آبجکت apollo ، برای جستجوی همه کاربران ، عبارت GraphQL را اضافه می کنیم. از ALL_USERS_QUERY که در بالا ایجاد کردیم استفاده می کند. ذکر این نکته حائز اهمیت است که ، نام داده های ما (allUsers در این مورد) باید به همان نامی باشد که در جستار GraphQL استفاده می شود (در این مورد allUsers). هنگامی که allUsers با داده های سرور مجازی GraphQL ما جمع می شود ، کاربران را با حلقه زدن در آرایه کاربران در یک جدول نمایش می دهیم. همچنین برای مشاهده جزئیات هر کاربر پیوندی اضافه می کنیم.
اضافه کردن مسیر کاربران
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Users from ‘@/components/Admin/Users’

// add these inside the `routes` array
{
path: ‘/admin/users’,
name: ‘Users’,
component: Users
},
حال وقتی از مسیر /admin/users بازدید می کنیم ، باید لیستی از کاربران را مانند تصویر زیر ببینیم:

مشاهده جزئیات کاربر
در قسمت آخر پیوندی برای مشاهده جزئیات کاربر اضافه می کنیم. اکنون ، بیایید آن را پیاده سازی کنیم. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const USER_QUERY = gql`query UserQuery($id: Int!) {
user(id: $id) {
id
username
email
posts {
id
}
}
}`

این جستار GraphQL کاربر را با شناسه خود از سرور مجازی GraphQL دریافت می کند. شناسه کاربر را به عنوان یک آرگومان در نظر می گیرد. شناسه کاربر از مؤلفه UserDetails منتقل می شود.
در مرحله بعد ، بیایید مؤلفه UserDetails را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل UserDetails.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/UserDetails.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>User Details</h2>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Username</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.username” readonly>
</p>
</div>
</div>
</div>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Email Address</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.email” readonly>
</p>
</div>
</div>
</div>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Number of posts</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.posts.length” readonly>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>

export default {
name: ‘UserDetails’,
components: {
Menu
},
data () {
return {
user: ”,
id: this.$route.params.id
}
},
apollo: {
// fetch user by ID
user: {
query: USER_QUERY,
variables () {
return {
id: this.id
}
}
}
}
}
</script>

ما نام کاربری ، ایمیل و تعداد پست های ایجاد شده مشخص را نمایش می دهیم. USER_QUERY شناسه ی کاربری را که می خواهیم جزئیات او را مشاهده کنیم دریافت می کند. شناسه کاربری از پارامترهای مسیر گرفته می شود. یعنی /admin/users/12 داده شده، 12 شناسه یک کاربر خاص میباشد. نیاز به راهی داریم تا بتوانیم این شناسه را به جستار خود منتقل کنیم. برای این کار با تعریف یک تابع variables که یک آبجکت حاوی شناسه کاربر را برمیگرداند ، از reactive parameter استفاده می کنیم.
افزودن مسیر اطلاعات کاربر
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید. این مسیر باید زیر مسیرهای قبلی باشد:
src/router/index.js
import UserDetails from ‘@/components/Admin/UserDetails’

// add these inside the `routes` array
{
path: ‘/admin/users/:id’,
name: ‘UserDetails’,
component: UserDetails,
props: true
},

در حال حاضر باید بتوانیم جزئیات خاصی از کاربر را مشاهده کنیم:

اعتباردهی به کاربر
فقط کاربران معتبر می توانند پست جدیدی اضافه کنند. بنابراین ، به راهی نیاز داریم تا یک هدر Autorization را با استفاده از نشانه کاربر به همراه درخواست اضافه کردن پست جدید که نشان دهنده کاربر است ، ارسال کنیم. می توانیم با apollo-link-context به راحتی این کار را انجام دهیم. src / main.js را باز کنید و کد زیر را به آن اضافه کنید:
src/main.js
import { setContext } from ‘apollo-link-context’

const authLink = setContext((_, { headers }) => {
// get the authentication token from localstorage if it exists
const token = localStorage.getItem(‘blog-app-token’)

// return the headers to the context so httpLink can read them
return {
headers: {
…headers,
authorization: token ? `Bearer ${token}` : null
}
}
})

// update apollo client as below
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
})

ابتدا ، apollo-link-context را وارد می کنیم. سپس از آن استفاده می کنیم تا authLink را ایجاد کنیم که نشانه کاربر را از فضای ذخیره محلی دریافت کند و هدرهایی را که حاوی عنوان Authorization می باشد برگرداند. سرانجام ، در کلاینت Apollo از authLink استفاده می کنیم.
اکنون یک هدر اعتباردهی به همراه کلیه درخواستهای ایجاد شده به سرور مجازی GraphQL ما ارسال می شود.
افزودن پست جدید
پست ها قلب هر وبلاگ هستند. کاربران باید بتوانند یک پست جدید اضافه کنند. باز هم ، برای اضافه کردن پست جدید به وبلاگ خود، ابتدا جهش GraphQL را ایجاد خواهیم کرد. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const ADD_POST_MUTATION = gql`mutation AddPostMutation($title: String!, $content: String!) {
addPost(
title: $title,
content: $content
) {
id
slug
title
content
user {
id
username
email
}
}
}`
این جهش عنوان و محتوای پستی را که می خواهیم به آن اضافه کنیم به سرور مجازی GraphQL اضافه می کند.
سپس ، یک مولفه AddPost را در پوشه ادمین ایجاد کنید و کد زیر را درون آن پیست کنید:
src/components/Admin/AddPost.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Add Post</h2>

<form method=”post” @submit.prevent=”addPost”>
<div class=”field”>
<label class=”label”>Title</label>

<div class=”field”>
<label class=”label”>Content</label>

export default {
name: ‘AddPost’,
components: {
Menu
},
data () {
return {
title: ”,
content: ”
}
},
methods: {
addPost () {
this.$apollo
.mutate({
mutation: ADD_POST_MUTATION,
variables: {
title: this.title,
content: this.content
},
update: (store, { data: { addPost } }) => {
// read data from cache for this query
const data = store.readQuery({ query: ALL_POSTS_QUERY })

// add new post from the mutation to existing posts
data.allPosts.push(addPost)

// write data back to the cache
store.writeQuery({ query: ALL_POSTS_QUERY, data })
}
})
.then(response => {
// redirect to all posts
this.$router.replace(‘/admin/posts’)
})
}
}
}
</script>
این مؤلفه فرم اضافه کردن پست جدید را ارائه می دهد. با استفاده از ADD_POST_MUTATION متغیرهای لازم را به آن منتقل می کند. از آنجا که کلاینت Apollo جستار را کش میکند(در این مورد در حافظه قرار میدهد) ، در زمان اجرای اقدامات جهش به روشی برای به روزرسانی حافظه پنهان نیاز داریم. توجه کنید یک تابع update وجود دارد که ما با اضافه کردن پست جدید به حافظه نهان، از آن برای به روز کردن فروشگاه استفاده می کنیم. ابتدا داده ها را از حافظه نهان مطابق با جستار خود (ALL_POSTS_QUERY) می گیریم ، سپس پست جدید را به آرایه allPosts اضافه می کنیم. در آخر ، داده های جدید را دوباره در حافظه نهان می نویسیم. پس از ارسال موفق، به لیست پستها (که به زودی ایجاد خواهیم کرد) هدایت می شویم.
افزودن مسیر ارسال پست
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import AddPost from ‘@/components/Admin/AddPost’

// add these inside the `routes` array
{
path: ‘/admin/posts/new’,
name: ‘AddPost’,
component: AddPost
}
کاربران باید بتوانند اکنون پست جدیدی اضافه کنند:

نمایش پست ها
ما ابتدا با اضافه کردن کد زیر به src / Graphql.js ، عبارت GraphQL را ایجاد می کنیم:
src/graphql.js
export const ALL_POSTS_QUERY = gql`query AllPostsQuery {
allPosts {
id
title
slug
user {
username
}
}
}`
این جستار GraphQL تمام پست ها را از سرور مجازی GraphQL ما دریافت می کند.
سپس ، یک مولفه Posts را درون پوشه ادمین بسازید و کد زیر را در آن قرار دهید:
src/components/Admin/Posts.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Posts</h2>

<table class=”table is-striped is-narrow is-hoverable is-fullwidth”>
<thead>
<tr>
<th>title</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for=”post in allPosts”
:key=”post.id”>
<td>{{ post.title }}</td>
<td>{{ post.user.username }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</template>

export default {
name: ‘Posts’,
components: {
Menu
},
data () {
return {
allPosts: []
}
},
apollo: {
// fetch all posts
allPosts: {
query: ALL_POSTS_QUERY
}
}
}
</script>

ما از مؤلفه Menu ایجاد شده قبلی استفاده می کنیم. سپس داده های خود را تعریف می کنیم که پس از بدست آوردن اطلاعات از سرور مجازی GraphQL ما جمع می شوند. در درون آبجکت apollo ، برای دریافت همه کاربران ، عبارت GraphQL را اضافه می کنیم. که از ALL_USERS_QUERY که در بالا ایجاد کردیم، استفاده می کند. ذکر این نکته حائز اهمیت است که ، نام داده های ما (allUsers در این مورد) باید به همان نامی باشد که در جستار GraphQL ما استفاده می شود (در این مورد allUsers). هنگامی که allUsers با داده های سرور مجازی GraphQL ما جمع می شود ، کاربران را با حلقه زدن در آرایه کاربران در یک جدول نمایش می دهیم. همچنین برای مشاهده جزئیات هر کاربر پیوندی اضافه می کنیم.
افزودن مسیر پست ها
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Posts from ‘@/components/Admin/Posts’

// add these inside the `routes` array
{
path: ‘/admin/posts’,
name: ‘Posts’,
component: Posts
}
حال وقتی از مسیر /admin/posts بازدید می کنیم ، باید لیستی از پست ها را در تصویر زیر مشاهده کنیم:

ایجاد صفحه هوم وبلاگ
صفحه اصلی وبلاگ لیستی از تمام پست های ایجاد شده را درست مانند بخش نمایش پست ها نشان می دهد. در حقیقت ، صفحه اصلی دقیقاً از همان GraphQL استفاده می کند که در نمایش پست ها استفاده می شود. این تنها نشانه صفحه اصلی است که متفاوت خواهد بود. یک مولفه Home در قسمت src/components ایجاد کنید و کد زیر را به آن اضافه کنید:
src/components/Home.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-6 is-offset-3″>
<h1 class=”title”>Latest Posts</h1>

<h3
v-for=”post in allPosts”
:key=”post.id”
class=”title is-5″>
<router-link :to=”post.slug”>
{{ post.title }}
</router-link>
</h3>
</div>
</div>
</section>
</template>

export default {
name: ‘Home’,
data () {
return {
allPosts: []
}
},
apollo: {
// fetch all posts
allPosts: {
query: ALL_POSTS_QUERY
}
}
}
</script>

همانطور که می بینیم بخش JavaScript با کامپوننت Posts یکسان است. فقط نشانه گذاری متفاوت دارد. ما آرایه ی پست ها را دور می زنیم و عنوان هر پست را که با کد شماره صفحه آنها مرتبط است، نشان می دهیم.
اضافه کردن مسیر خانه
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Home from ‘@/components/Home’

// add these inside the `routes` array
{
path: ‘/’,
name: ‘Home’,
component: Home
}

در بازدید از مسیر / ، باید صفحه اصلی وبلاگ خود را مانند تصویر زیر مشاهده کنید:

مشاهده پست
آخرین موردی که باید اضافه شو ، امکان مشاهده پست خاص است. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const POST_QUERY = gql`query PostQuery($slug: String!) {
post(slug: $slug) {
id
title
slug
content
user {
id
username
email
}
}
}`

این جستار یک پست را با کد شماره صفحه خود دریافت میکند. کد شماره صفحه پست را به عنوان یک آرگومان میگیرد.
سپس ، یک مولفه SinglePost را در داخل src/components ایجاد کرده و کد زیر را به آن اضافه کنید:
src/components/SinglePost.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-6 is-offset-3″>
<router-link class=”button is-link is-small” to=”/”>Back Home</router-link>

<h1 class=”title”>
{{ post.title }}
</h1>

<div class=”content”>
{{ post.content }}
</div>
</div>
</div>
</section>
</template>

export default {
name: ‘SinglePost’,
data () {
return {
post: ”,
slug: this.$route.params.slug
}
},
apollo: {
// fetch post by slug
post: {
query: POST_QUERY,
variables () {
return {
slug: this.slug
}
}
}
}
}
</script>

ما به سادگی عنوان پست و محتوای آن و سپس پیوندی را برای بازگشت به صفحه اصلی نمایش می دهیم. بخش JavaScript پیاده سازی مورد استفاده در نمایش جزئیات کاربر را دنبال می کند. در این حالت ، کد شماره صفحه پست را از پارامترهای مسیر دریافت می کنیم.
افزودن مسیر مشاهده پست
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import SinglePost from ‘@/components/SinglePost’

// add these inside the `routes` array
{
path: ‘/:slug’,
name: ‘SinglePost’,
component: SinglePost,
props: true
}
توجه: این مسیر باید آخرین مسیر در آرایه مسیرها باشد.
اکنون باید بتوانیم یک پست واحد را مشاهده کنیم:

نتیجه
در این آموزش ، نحوه ساختن یک برنامه وبلاگ با GraphQL ، کلاینت Apollo و VueJS را مشاهده کردیم. همچنین دیدیم که چگونه برنامه frontend خود را به یک سرور مجازی GraphQL وصل کنیم. کد کامل این آموزش در GitHub موجود است.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade