در قسمت‌های قبل (
^ ،
^ و
^ ) GraphQL را در ASP.Net Core راه اندازی کردیم و در قسمت (
فراخوانی GraphQL API در یک کلاینت ASP.NET Core ) از GraphQL API فراهم شده در یک کلاینت ASP Net Core استفاده کردیم. اکنون می‌خواهیم چگونگی استفاده از GraphQL را در انگیولار، یاد بگیریم.
Apollo Angular، به شما اجازه میدهد داده‌ها را از یک سرور GraphQL دریافت و از آن برای ساختن UI های واکنشی و پیچیده در انگیولار استفاده کنید. وقتی که از Apollo Client استفاده می‌کنیم، نیازی نیست هیچ چیز خاصی را در مورد سینتکس query ها یادبگیریم؛ به دلیل اینکه همه چیز همان استاندارد GraphQL می‌باشد. هر چیزی را که شما در GraphQL query IDE تایپ می‌کنید، می‌توانید آن‌ها را در کدهای Apollo Client نیز قرار دهید.
Installation with Angular Schematics
بعد از ایجاد یک پروژه انگیولار با دستور زیر
ng new apollo-angular-project
در ترمینال VS Code دستور زیر را وارد نمایید:
تنها کاری که بعد از اجرای دستور بالا نیاز است انجام دهیم، تنظیم آدرس سرور GraphQL می‌باشد. از این رو فایل graphql.module.ts را باز کنید و متغیر uri را مقدار دهی کنید.
const uri = 'https://localhost:5001/graphql';
اکنون همه چیز تمام شده‌است. شما می‌توانید اولین query خود را اجرا کنید.
Installation without Angular Schematics
اگر می‌خواهید Apollo را بدون کمک گرفتن از Angular Schematics نصب کنید، در ابتدا کتابخانه‌های زیر را نصب نمائید:
npm install --save apollo-angular \
apollo-angular-link-http \
apollo-link \
apollo-client \
apollo-cache-inmemory \
graphql-tag \
graphql
کتابخانه apollo-client نیازمند AsyncIterable می‌باشد. به همین جهت مطمئن شوید فایل tsconfig.json شما به صورت زیر است:
{
"compilerOptions": {
// ...
"lib": [
"es2017",
"dom",
"esnext.asynciterable"
]
}
}
اکنون شما تمام وابستگی‌های مورد نیاز را دارید. سپس می‌توانید اولین Apollo Client خود را اجرا کنید.
در ادامه، فایل app.module.ts را باز کرده و آن را مطابق زیر ویرایش کنید:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from "@angular/common/http";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
@NgModule({
declarations:
[
AppComponent
],
imports:
[
BrowserModule,
HttpClientModule,
ApolloModule,
HttpLinkModule
],
providers:
[
{
provide: APOLLO_OPTIONS,
useFactory: (httpLink: HttpLink) => {
return {
cache: new InMemoryCache(),
link: httpLink.create({
uri: "https://localhost:5001/graphql"
})
}
},
deps:
[
HttpLink
]
}],
bootstrap:
[
AppComponent
]
})
export class AppModule { }
چه کاری در اینجا انجام شده است:
- با استفاده از سرویس apollo-angular-link-http و HttpLink، کلاینت را به یک سرور GraphQL متصل می‌کنیم.
- apollo-cache-inmemory و InMemoryCache محلی برای ذخیره سازی داده‌ها می‌باشد.
- APOLLO_OPTIONS فراهم کننده تنظیمات Apollo Client است.
- HttpLink نیاز به HttpClient دارد. به همین خاطر است که ما از HttpClientModule استفاده کرده‌ایم.
Links and Cache
Apollo Client، یک لایه واسط شبکه قابل تعویض را دارد که به شما اجازه میدهد تا تنظیم کنید که چگونه query ها در HTTP ارسال شوند؛ یا کل بخش Network را با چیزی کاملا سفارشی سازی شده جایگزین کنید؛ مثل یک websocket transport.
apollo-angular-link-http : از Http برای ارسال query ها استفاده می‌کند.
apollo-cache-inmemory : پیاده سازی کش پیش فرض برای Apollo Client 2.0 می‌باشد.
نکته
Apollo یک سرویس export شده انگیولار از apollo-angular، برای به اشتراک گذاشتن داده‌های GraphQL با UI شما می‌باشد.
شروع کار
به همان روش که فایل‌های Model را برای
کلاینت ASP.NET Core ایجاد کردیم، در اینجا هم ایجاد می‌کنیم. کار را با ایجاد کردن یک پوشه جدید به نام types، شروع می‌کنیم و چند type را در آن تعریف خواهیم کرد ( OwnerInputType ،AccountType و OwnerType ):
export type OwnerInputType = {
name: string;
address: string;
} export type AccountType = {
'id': string;
'description': string;
'ownerId' : string;
'type': string;
} import { AccountType } from './accountType';
export type OwnerType = {
'id': string;
'name': string;
'address': string;
'accounts': AccountType[];
} سپس یک سرویس را به نام graphql ایجاد می‌کنیم:
و آن را همانند زیر ویرایش می‌کنیم:
import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
@Injectable({
providedIn: 'root'
})
export class GraphqlService {
constructor(private apollo: Apollo) { }
} اکنون همه چیز آماده است تا تعدادی query و mutation را اجرا کنیم (
providedIn ).
بازیابی تمامی Owner ها
سرویس graphql را باز می‌کنیم و آن را همانند زیر ویرایش می‌کنیم ( اضافه کردن متد getOwners ):
public getOwners = () => {
return this.apollo.query({
query: gql`query getOwners{
owners{
id,
name,
address,
accounts{
id,
description,
type
}
}
}`
});
} سپس فایل app.component.ts را باز کرده و همانند زیر ویرایش می‌کنیم:
export class AppComponent implements OnInit {
public owners: OwnerType[];
public loading = true;
constructor(private graphQLService: GraphqlService) { }
ngOnInit() {
this.graphQLService.getOwners().subscribe(result => {
this.owners = result.data["owners"] as OwnerType[];
this.loading = result.loading;
});
}
} و هم چنین app.component.html:
<div>
<div *ngIf="!this.loading">
<table>
<thead>
<tr>
<th>
#
</th>
<th>
نام و نام خانوادگی
</th>
<th>
آدرس
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of this.owners;let idx=index" [ngTemplateOutlet]="innertable"
[ngTemplateOutletContext]="{item:item, index:idx}"></ng-container>
</tbody>
</table>
</div>
<div *ngIf="this.loading">
<p>
در حال بارگذاری لیست ...
</p>
</div>
</div>
<ng-template #innertable let-item="item" let-idx="index">
<tr>
<td>{{idx+1}}</td>
<td>{{item.name}}</td>
<td>{{item.address}}</td>
</tr>
<tr *ngIf="this.item.accounts && this.item.accounts.length > 0">
<td colspan="4">
<div>
<p>Accounts</p>
</div>
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>نوع</th>
<th>توضیحات</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let innerItem of this.item.accounts;let innerIndex=index">
<td>
{{innerIndex+1}}
</td>
<td>
{{innerItem.type}}
</td>
<td>
{{innerItem.description}}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</ng-template>
اکنون جهت اجرای پروژه، کدهای ضمیمه شده در پایان
قسمت ( GraphQL Mutations در ASP.NET Core ( عملیات POST, PUT, DELETE ) ) را دانلود نمایید و آن را اجرا کنید:
dotnet restore
dotnet run
سپس پروژه را اجرا کنید:
خروجی به صورت زیر می‌باشد (لیست تمامی Owner ها به همراه Accountهای مربوط به هر Owner):
در متد getOwner، بجای apollo.query می‌توان از apollo.watchQuery استفاده کرد که در نمونه زیر، در ابتدا، GraphQL query را در تابع gql ( از graphql-tag ) برای خصوصیت query در متد apollo.watchQuery پاس میدهیم.
public getOwners = () => {
return this.apollo.watchQuery<any>({
query: gql`query getOwners{
owners{
id,
name,
address,
accounts{
id,
description,
type
}
}
}`
})
} export class AppComponent implements OnInit {
loading: boolean;
public owners: OwnerType[];
private querySubscription: Subscription;
constructor(private graphQLService: GraphqlService) { }
ngOnInit() {
this.querySubscription = this.graphQLService.getOwners()
.valueChanges
.subscribe(result => {
this.loading = result.loading;
this.owners = result.data["owners"] as OwnerType[];
});
}
ngOnDestroy() {
this.querySubscription.unsubscribe();
}
}
متد watchQuery، شیء QueryRef را برگشت میدهد که خصوصیت valueChanges را دارد که آن یک Observable می‌باشد. Observable تنها یک بار صادر خواهد شد و آن زمانی است که query کامل می‌شود و خصوصیت loading به false تنظیم خواهد شد؛ مگر اینکه شما پارامتر notifyOnNetworkStatusChange را در watchQuery به true تنظیم کنید. شیء منتقل شده از طریق یک Observable، شامل خصوصیات loading ،error و data است. هنگامی که نتیجه query برگشت داده می‌شود، به خصوصیت data انتساب داده می‌شود.
مابقی query ها و mutation ها از سرویس graphql
بازیابی یک Owner مشخص
public getOwner = (id) => {
return this.apollo.query({
query: gql`query getOwner($ownerID: ID!){
owner(ownerId: $ownerID){
id,
name,
address,
accounts{
id,
description,
type
}
}
}`,
variables: { ownerID: id }
})
} ایجاد یک Owner جدید
public createOwner = (ownerToCreate: OwnerInputType) => {
return this.apollo.mutate({
mutation: gql`mutation($owner: ownerInput!){
createOwner(owner: $owner){
id,
name,
address
}
}`,
variables: { owner: ownerToCreate }
})
} ویرایش یک Owner
public updateOwner = (ownerToUpdate: OwnerInputType, id: string) => {
return this.apollo.mutate({
mutation: gql`mutation($owner: ownerInput!, $ownerId: ID!){
updateOwner(owner: $owner, ownerId: $ownerId){
id,
name,
address
}
}`,
variables: { owner: ownerToUpdate, ownerId: id }
})
} و در نهایت حذف یک Owner
public deleteOwner = (id: string) => {
return this.apollo.mutate({
mutation: gql`mutation($ownerId: ID!){
deleteOwner(ownerId: $ownerId)
}`,
variables: { ownerId: id }
})
}
اکنون شما می‌توانید با ویرایش کردن فایل app.component.ts یا ایجاد کردن کامپوننت‌های جدید، از نتایج بدست آمده استفاده کنید.
