初識GraphQL，你的第一個Query

請移步到個人Blog，得到更好的閱讀體驗！本文的連接請點 這裏

GraphQL是什麼？

GraphQL官方解釋是一個用於API的查詢語言。這樣提及來可能不太好理解。

例如一個用於請求用戶數據的傳統的restFulAPI：

這個API始終會返回id,name,avatar三個屬性。

若是咱們不須要avatar這個屬性呢？

咱們能夠讓後端的小哥哥小姐姐幫忙去掉avatar這條屬性，或者新寫一個接口作這個事情。

那麼，可不能夠前端去控制須要的字段？

答案是能夠的，GraphQL爲此而生。下面的代碼塊是一個graphQL查詢語句，當咱們只須要account的id和name時這樣寫查詢就能夠了，若是須要avatar，咱們再加上avatar就能夠了。

{
  account {
    id
    name
  }
}

這樣對比restFulAPI而言，graphQL更加靈活，可以準確獲取想要的數據。

結論：查詢語句放在前端，由前端來控制須要的數據，因此是用於API的查詢語言。

爲何要使用GraphQL？

• 字段冗餘
• 獲取多個數據，只用一個請求
• 清晰的描述全部的數據類型，數據結構

如何使用GraphQL？

這裏我用nestjs做爲後端服務器，不熟悉nestjs的小夥伴能夠點這裏學習一下nestjs。

1. 建立後端服務

npm i -g @nestjs/cli
nest new graph-ql
cd graph-ql

1. 安裝graphQL相關依賴

yarn add @nestjs/graphql apollo-server-express graphql-tools graphql

1. 在ApplicationModule中引用GraphQLModule

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

@Module({
  imports: [
    GraphQLModule.forRoot({}),
  ],
})
export class ApplicationModule {}

1. 設置Schema的路徑，這樣，GraphQL就能夠檢測到咱們的graphql文件了

GraphQLModule.forRoot({
  typePaths: ['./**/*.graphql'],
}),

1. 建立咱們的account查詢

在src下新建名爲account的文件夾，及相關代碼文件

# account.graphql
type Account {
    id: Int
    name: String
    avatar: String
}
type Query {
    account(id: ID!): Account
}

// account.schema.ts
export abstract class Account {
    id?: number;
    name?: string;
    avatar?: string;
}

// account.resolvers.ts
import { ParseIntPipe } from '@nestjs/common';
import { Args, Query, Resolver } from '@nestjs/graphql';
import { Account } from './account.schema';

const account: Account = {
  id: 0,
  name: 'eick',
  avatar: 'https://avatars0.githubusercontent.com/u/22267244'
}

@Resolver('Account')
export class AccountResolvers {
  @Query('account')
  async account(@Args('id', ParseIntPipe) id: number): Promise<Account> {
    return account;
  }
}

// account.module.ts
import { Module } from '@nestjs/common';
import { AccountResolvers } from './account.resolvers';

@Module({
  imports: [],
  providers: [AccountResolvers],
})
export class AccountModule { }

1. 在AppModule中引用AccountModule

// app.module.ts
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { AccountModule } from './account/account.module';

@Module({
  imports: [
    AccountModule,
    GraphQLModule.forRoot({
      typePaths: ['./**/*.graphql'],
    }),
  ],
})
export class AppModule { }

1. 啓動nestjs服務

yarn run start:dev

1. 訪問http://localhost:3000/graphql，打開Playground查詢界面

這樣，咱們的第一個graphQL就已經寫好啦。

咱們能夠在Playground的左側面板中輸入查詢語句：

{
  account(id:1){
    name
  }
}

點擊查詢按鈕,就會出現咱們須要的數據啦：

到這裏，graphQL的一個簡單的query就完成啦，示例中沒有關聯數據庫，能夠自行在resolver中查詢數據庫。