در قسمت‌های قبل ( ^ ، ^ و ^ ) 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
ng add apollo-angular
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
{
"compilerOptions": {
// ...
"lib": [
"es2017",
"dom",
"esnext.asynciterable"
]
}
} در ادامه، فایل 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 ایجاد میکنیم:
ng g s 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> dotnet restore dotnet run
سپس پروژه را اجرا کنید:
ng serve
خروجی به صورت زیر می‌باشد (لیست تمامی 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();
}
} مابقی 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 }
})
} کدهای کامل این قسمت را از ایجا دریافت کنید : GraphQL_Angular.zip
کدهای کامل قسمت ( GraphQL Mutations در ASP.NET Core ( عملیات POST, PUT, DELETE ) ) را از اینجا دریافت کنید : ASPCoreGraphQL_3.rar
