سرور مجازی NVMe

ساختن API های GraphQL با Vue.js و Apollo ClientGraphQL یک زبان پرس و جو گرافگرا است که توسط فیس بوک نوشته شده است. برخلاف REST API ها، GraphQL ویژگی هایی را معرفی می کند که توسعه API را کارآمدتر و هماهنگ با مدل های پایگاه داده می کند. ویژگی های GraphQL برخلاف REST، تنها یک نقطه پایانی وجود دارد که قرار است تمام درخواست ها به آنجا ارسال شوند. بنابراین به جای …

JavaScript (JS)برنامه نویسی

توسط مهران در بهمن ۵, ۱۴۰۲

ساختن API های GraphQL با Vue.js و Apollo ClientGraphQL یک زبان پرس و جو گرافگرا است که توسط فیس بوک نوشته شده است. برخلاف REST API ها، GraphQL ویژگی هایی را معرفی می کند که توسعه API را کارآمدتر و هماهنگ با مدل های پایگاه داده می کند. ویژگی های GraphQL برخلاف REST، تنها یک نقطه پایانی وجود دارد که قرار است تمام درخواست ها به آنجا ارسال شوند. بنابراین به جای ...

سرفصلهای مطلب

زمان لازم برای مطالعه: 9 دقیقه

معرفی

GraphQL یک زبان پرس و جو گراف محور است که توسط فیس بوک نوشته شده است. برخلاف REST API ها، GraphQL ویژگی هایی را معرفی می کند که توسعه API را کارآمدتر و هماهنگ با مدل های پایگاه داده می کند.

ویژگی های GraphQL

بر خلاف باقی مانده، تنها یک نقطه پایانی وجود دارد که قرار است تمام درخواست ها به آنجا ارسال شوند. بنابراین به جای پرس و جو /users برای دریافت لیستی از کاربران، یا /user/:id برای به دست آوردن یک کاربر خاص، نقطه پایانی شبیه به آن خواهد بود /graphql برای تمام درخواست ها
در GraphQL، داده‌هایی که از یک پاسخ برمی‌گردند، توسط کتابخانه پرس و جو بیان شده تنظیم می‌شوند و می‌توان آن را طوری تنظیم کرد که فقط چند ویژگی داده ارسال کند، بنابراین، پرس‌و‌جوها در GraphQL عملکرد بهتری دارند.
نیازی به تنظیم افعال متد در GraphQL نیست. کلمات کلیدی مانند پرس و جو یا جهش تصمیم خواهد گرفت که درخواست چه کاری انجام دهد.
مسیرهای REST API معمولاً توسط یک کنترل کننده مسیر مدیریت می شوند. در GraphQL می‌توانید یک پرس‌وجو جهش‌های متعدد را راه‌اندازی کند و یک پاسخ ترکیبی از منابع متعدد دریافت کنید.

پرس و جوها

آ پرس و جو یک روش GraphQL است که به ما اجازه می دهد گرفتن داده ها از API ما حتی اگر ممکن است پارامترهایی را برای فیلتر کردن، سفارش دادن یا جستجوی ساده برای یک سند خاص دریافت کند، پرس و جو نمی تواند این داده ها را تغییر دهد.

جهش ها

جهش ها همه چیز هستند نه چه چیزی به یک فعل GET در APIهای معمولی اشاره دارد. به روز رسانی، ایجاد یا حذف داده ها از API ما از طریق جهش انجام می شود

اشتراک ها

با استفاده از سوکت های وب، اشتراک به ارتباط بین مشتری و سرور اشاره دارد.

سرور دائماً به دنبال جهش ها یا پرس و جوهایی است که به یک اشتراک خاص متصل می شوند و هرگونه تغییر را در زمان واقعی به مشتری منتقل می کنند. اشتراک ها بیشتر برای ویجت ها/برنامه های بلادرنگ استفاده می شوند.

انواع و ورودی ها

برای اینکه مطمئن شویم پرس و جوها و جهش های ما می توانند process داده ها برای پرس و جو از یک پایگاه داده، types بسیار شبیه یک ORM مدل برای پایگاه های داده کار می کند. با تنظیم انواع تا ما می توانیم نوع متغیری را که رزولورهای ما برمی گردند تعریف کنیم.

به طور مشابه، ما نیاز داریم که انواع ورودی را برای حل کننده های خود تنظیم کنیم تا دریافت کنند.

مثلا زوج تعریف می کنیم types و inputs:

type User {
  id: ID
  name: String!
  age: Int!
  address: Address
  followers: (ID)
}

type Address {
  street: String
  city: String
  country: String
}

input UserInput {
  name: String!
  age: Int!
}

type Query {
  getAllUsers: (User)
}

type Mutation {
  createUser(user: UserInput!): ID
}

ویژگی‌ها می‌توانند به‌عنوان نوع خود، جدا از ویژگی‌های اولیه، نوع سفارشی داشته باشند، مانند:

رشته
بین المللی
شناور
بولی
شناسه

و همچنین می توانند آرایه ای از نوع خاصی باشند که توسط براکت ها تعیین می شود که در مثال بالا نشان داده شده است.

علاوه بر این، وضعیت اجباری یک ملک را می توان با تنظیم کرد !، به این معنی که ملک نیاز به وجود دارد.

حل کننده ها

اینها اقداماتی هستند که هنگام فراخوانی کوئری ها و جهش ها انجام می شوند.

getAllUsers و createUser قرار است به یک حل کننده متصل شوند که محاسبات واقعی و پرس و جوهای پایگاه داده را انجام می دهد.

ایجاد پروژه ما

برای این آموزش، ما یک پروژه Vue.js با استفاده از Vue CLI 3.0، که یک پروژه را با ساختار پوشه ای به شکل زیر بوت استرپ می کند:

اگر برای راه اندازی پروژه به کمک نیاز دارید، می توانید به این آموزش برای رابط خط فرمان نگاه کنید.

ما می توانیم با دستور زیر سرویس برنامه خود را شروع کنیم:

$ npm run serve

مشتری آپولو

مشتری آپولو ابزاری را برای توسعه front-end به ارمغان می آورد تا پرس و جوها/جهش های GraphQL را آسان تر کند. به عنوان یک کلاینت HTTP عمل می کند که به GraphQL API متصل می شود و قابلیت های کش، مدیریت خطا و حتی مدیریت حالت را فراهم می کند.

برای این آموزش، Vue-Apollo استفاده خواهد شد، که ادغام Apollo است که مخصوص Vue.js طراحی شده است.

پیکربندی آپولو

برای شروع پیکربندی آپولو، باید چند بسته نصب شود:

$ npm install apollo-client apollo-link-http apollo-cache-inmemory vue-apollo graphql graphql-tag

داخل a /graphql پوشه در پروژه خود را ایجاد خواهیم کرد apollo.js:

// apollo.js

import Vue from 'vue'
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({
    uri: process.env.VUE_APP_GRAPHQL_ENDPOINT
})

// Create the apollo client
export const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
    connectToDevTools: true
})

// Install the Vue plugin

Vue.use(VueApollo)

export const apolloProvider = new VueApollo({
    defaultClient: apolloClient
})

HttpLink یک شی است که نیاز به a uri ویژگی، که به نقطه پایانی GraphQL از API مورد استفاده اشاره دارد. سابق: localhost:8081/graphql

سپس، یک جدید ApolloClient نمونه باید ایجاد شود، جایی که می توان پیوند، نمونه حافظه پنهان و گزینه های دیگر را تنظیم کرد.

در نهایت، ما را بسته بندی می کنیم ApolloClient داخل a VueApollo به عنوان مثال تا بتوانیم از قلاب های آن در داخل اجزای Vue خود استفاده کنیم.

مدیریت خطای جهانی

راهی برای رسیدگی به خطاها به صورت سراسری در داخل فایل پیکربندی وجود دارد. برای این کار باید یک بسته npm به نام نصب کنیم apollo-link-error، که خطاهای شبکه را بررسی و مدیریت می کند:

// apollo.js

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { onError } from "apollo-link-error"
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

const httpLink = new HttpLink({
    uri: process.env.VUE_APP_GRAPHQL_ENDPOINT
})

// Error Handling
const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
            console.log(
                `(GraphQL error): Message: ${message}, Location: ${locations}, Path: ${path}`
            )
        )
    if (networkError) console.log(`(Network error): ${networkError}`)
})

// Create the apollo client
export const apolloClient = new ApolloClient({
    link: errorLink.concat(httpLink),
    cache: new InMemoryCache(),
    connectToDevTools: true
})

// Install the Vue plugin
Vue.use(VueApollo)

export const apolloProvider = new VueApollo({
    defaultClient: apolloClient
})

پس از واردات onError تابع از بسته، ما می توانیم آن را به عنوان نوعی میان افزار Apollo Client پیاده سازی کنیم. هر گونه خطای شبکه یا GraphQL را شناسایی می کند و به ما این شانس را می دهد که آنها را در سطح جهانی مدیریت کنیم.

هر زمان که خطایی رخ دهد، callback با یک شی با برخی ویژگی ها فراخوانی می شود:

عمل: عملیاتی که به دلیل یافتن خطایی باعث بازگشت تماس شد.
واکنش: نتیجه عمل.
خطاهای graphQLE: آرایه ای از خطاها از نقطه پایانی GraphQL
خطای شبکه: هر گونه خطا در حین اجرای عملیات یا خطای سرور.
رو به جلو: لینک بعدی که در زنجیره ارجاع داده شده است.

مدیریت ایالت با Apollo Client

جایگزینی متفاوت برای استفاده Vuex با پروژه های Vue، و هنگام استفاده از Apollo Client باید از بسته ای به نام استفاده کنید apollo-link-state.

این به عنوان یک ابزار مدیریت داده های محلی کار می کند که به گونه ای کار می کند که گویی در حال پرس و جو از یک سرور هستید، اما این کار را به صورت محلی انجام می دهد.

همچنین، این یک راه عالی برای مدیریت کش برای برنامه ما است، بنابراین Apollo Client را به یک کلاینت HTTP و ابزار مدیریت وضعیت/کش تبدیل می کند.

برای اطلاعات بیشتر، می توانید اسناد رسمی را بررسی کنید آپولو-پیوند-وضعیت.

ایجاد پرس و جو

برای ایجاد کوئری ها باید یک برچسب رشته ای با بسته تنظیم کنیم graphql-tag. برای مرتب و منظم نگه داشتن یک پروژه، پوشه ای به نام ایجاد می کنیم queries داخل پوشه graphql

با فرض اینکه سرور دریافت کننده پرس و جو به درستی تنظیم شده است تا این پرس و جو را تفسیر کند، به عنوان مثال، می توانیم حل کننده ای به نام راه اندازی کنیم getAllUsers:

import gql from 'graphql-tag'

export const GET_ALL_USERS_QUERY = gql`
  query getAllUsers {
    getAllUsers {
      // Fields to retrieve
      name
      age
    }
  }
`

عملیات پیش فرض در GraphQL است query، بنابراین query کلمه کلیدی اختیاری است

اگر یک فیلد بازیابی شده دارای زیرفیلدهایی باشد، حداقل یکی از آنها باید برای موفقیت پرس و جو واکشی شود.

استفاده از جهش

مانند پرس و جوها، ما همچنین می توانیم با ایجاد a از جهش استفاده کنیم gql-string.

import gql from 'graphql-tag'

export const CREATE_USER_MUTATION = gql`
  mutation createUser($user: UserInput!) {
    createUser(user: $user)
  }
`

ما createUser جهش انتظار دارد a UserInput ورودی، و، برای استفاده از پارامترهای ارسال شده توسط آپولو. ابتدا یک متغیر با the تعریف می کنیم $ تماس گرفت user. سپس، wrapper خارجی متغیر را به the ارسال می کند createUser جهش، همانطور که توسط سرور انتظار می رود.

قطعات

به منظور حفظ ما gql-type رشته های مرتب و خوانا، ما می توانیم استفاده کنیم قطعات برای استفاده مجدد از منطق پرس و جو

fragment UserFragment روی User {
  name: String!
  age: Int!
}

query getAllUsers {
  getAllUsers {
    ...UserFragment
  }
}

استفاده از GraphQL در اجزای Vue

درون main.js فایل، برای پیکربندی آپولو کلاینت، باید import و مشتری را به نمونه ما متصل کنید.

// main.js
import Vue from 'vue'
import { apolloProvider } from './graphql/apollo'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    apolloProvider,
    render: h => h(App)
})

از آنجایی که ما خود را اضافه کرده ایم ApolloProvider به نمونه Vue، ما می توانیم از طریق به مشتری دسترسی داشته باشیم $apollo کلمه کلیدی:

// GraphQLTest.vue
<template>
    <div class="graphql-test">
        <h3 v-if="loading">Loading...</h3>
        <h4 v-if="!loading">{{ getAllUsers }}</h4>
    </div>
</template>

<script>
import { GET_ALL_USERS_QUERY } from '../graphl/queries/userQueries'
export default {
    name: 'GraphQLTest',
    data () {
        return {
            users: ()
        }
    },
    async mounted () {
        this.loading = true
        this.users = await this.$apollo.query({ query: GET_ALL_USERS_QUERY })
        this.loading = false
    }
}
</script>

اگر بخواهیم یک کاربر ایجاد کنیم، می توانیم از a استفاده کنیم mutation:

// GraphQLTest.vue
<template>
    <div class="graphql-test">
        <input v-model="user.name" type="text" placeholder="Name" />
        <input v-model="user.age" placeholder="Age" />
        <button @click="createUser">Create User</button>
    </div>
</template>

<script>
import { CREATE_USER_MUTATION } from '../graphl/queries/userQueries'
export default {
    name: 'GraphQLTest',
    data() {
        return {
            user: {
                name: null,
                age: null
            }
        }
    },
    methods: {
        async createUser () {
            const userCreated = await this.$apollo.mutate({
                mutation: CREATE_USER_MUTATION,
                variables: {
                    user: this.user // this should be the same name as the one the server is expecting
                }
            })
            // We log the created user ID
            console.log(userCreated.data.createUser)
        }
    }
}
</script>

استفاده از این رویکرد به ما امکان می دهد زمان و مکان اجرای جهش ها و پرس و جوهای ما را به صورت ریز مدیریت کنیم. اکنون روش‌های دیگری را برای مدیریت این روش‌ها که Vue Apollo در اختیار ما قرار می‌دهد، خواهیم دید.

شی آپولو

در داخل کامپوننت های Vue، ما به آن دسترسی داریم Apollo شی، که می تواند برای مدیریت آسان پرس و جوها و اشتراک های ما استفاده شود:

<template>
    <div class="graphql-test">
        {{ getAllUsers }}
    </div>
</template>

<script>
import { GET_ALL_USERS_QUERY } from '../graphl/queries/userQueries'
export default {
    name: 'GraphQL-Test',
    apollo: {
        getAllUsers: {
            query: GET_ALL_USERS_QUERY
        }
    }
}
</script>

واکشی مجدد پرس و جوها

هنگام تعریف یک پرس و جو در داخل شی Apollo، ممکن است واکشی مجدد این پرس و جو هنگام فراخوانی یک جهش یا پرس و جوی دیگر با refetch روش یا refetchQueries ویژگی:

<template>
    <div class="graphql-test">
        {{ getAllUsers }}
    </div>
</template>

<script>
import { GET_ALL_USERS_QUERY, CREATE_USER_MUTATION } from '../graphl/queries/userQueries'
export default {
    name: 'GraphQL-Test',
    apollo: {
        getAllUsers: {
            query: GET_ALL_USERS_QUERY
        }
    },
    methods: {
        refetch () {
            this.$apollo.queries.getAllUsers.refetch()
        },
        queryUsers () {
            const user = { name: Lucas, age: 26 }
            this.$apollo.mutate({
                mutation: CREATE_USER_MUTATION,
                variables: {
                    user
                }
                refetchQueries: (
                    { query: GET_ALL_USERS_QUERY }
                )
            })
        }
    }
}
</script>

با استفاده از Apollo شی، توسط Vue-Apollo، دیگر نیازی به استفاده فعالانه از روش کلاینت آپولو برای راه اندازی پرس و جوها/اشتراک ها نداریم و برخی ویژگی ها و گزینه های مفید در دسترس ما قرار می گیرند.

ویژگی های جسم آپولو

پرس و جو: این است gql رشته را با اشاره به پرس و جوی که می خواهد راه اندازی شود تایپ کنید.
متغیرها: شیئی که پارامترهای ارسال شده به یک پرس و جو را می پذیرد.
fetchPolicy: خصوصیتی که روش تعامل پرس و جو با حافظه پنهان را تعیین می کند. گزینه ها هستند cache-and-network، network-only، cache-only، no-cache، standby و پیش فرض است cache-first.
فاصله نظرسنجی: زمان بر حسب میلی ثانیه که تعیین می کند یک پرس و جو به طور خودکار چند بار راه اندازی شود.

گزینه های ویژه

خطای $ برای گرفتن خطاها در یک کنترل کننده مجموعه.
$ عمیق عمیقاً به دنبال تغییرات در یک پرس و جو است.
$ رد شدن: همه پرس و جوها و اشتراک ها را در یک جزء معین غیرفعال می کند.
$skipAllQueries: همه پرس و جوهای یک جزء را غیرفعال می کند.
$skipAllSubscriptions: برای غیرفعال کردن همه اشتراک ها در یک جزء.

اجزای آپولو

با الهام از روشی که Apollo Client برای آن پیاده سازی شده است واکنش نشان دهید (واکنش – آپولوVue-Apollo چند مؤلفه را در اختیار ما قرار می دهد که می توانیم از آنها برای مدیریت رابط کاربری و وضعیت پرس و جوها و جهش های خود با یک مؤلفه Vue در داخل قالب استفاده کنیم.

ApolloQuery

روشی ساده تر برای مدیریت پرس و جوهای ما به شیوه ای شهودی تر:

<ApolloQuery
  :query="GET_ALL_USERS_QUERY"
>
    <template slot-scope="{ result: { loading, error, data } }">
        <!-- Loading -->
        <div v-if="loading">Query is loading.</div>

        <!-- Error -->
        <div v-else-if="error">We got an error!</div>

        <!-- Result -->
        <div v-else-if="data">{{ data.getAllUsers }}</div>

        <!-- No result (if the query succeed but there's no data) -->
        <div v-else>No result from the server</div>
    </template>
</ApolloQuery>

آپولو جهش

بسیار شبیه به مثال بالا است، اما باید جهش را با the فعال کنیم mutate فراخوانی تابع:

<ApolloMutation
  :mutation="CREATE_USER_MUTATION"
  :variables="{
    name,
    age
  }"
  @done="mutationFinished"
>
    <template slot-scope="{ mutate, loading, error }">
        <!-- Loading -->
        <h4 v-if="loading">The mutation is loading!</h4>

        <!-- Mutation Trigger -->
        <button @click="mutate()">Create User</button>

        <!-- Error -->
        <p v-if="error">An error has occurred!</p>
    </template>
</ApolloMutation>

نتیجه

GraphQL انعطاف‌پذیری زیادی را برای توسعه API به ارمغان می‌آورد، از عملکرد، سهولت استفاده و دیدگاه کلی متفاوت از ظاهر و رفتار یک API. علاوه بر این، ApolloClient و Vue Apollo مجموعه ای از ابزارها را برای مدیریت بهتر UI، وضعیت و عملیات ما، حتی مدیریت خطا و حافظه پنهان ارائه می دهند!

برای اطلاعات بیشتر در مورد GraphQL و Apollo Client می توانید به آدرس زیر مراجعه کنید:

(برچسب‌ها به ترجمه)# جاوا اسکریپت

منتشر شده در 1403-01-25 10:00:03

امتیاز شما به این مطلب