Please step into my Blog for a better reading experience!Links to this article Here

What is GraphQL?

The official interpretation of GraphQL is a query language for the API.That may not be very understandable.

For example, a traditional restFulAPI for requesting user data:

This API always returns three attributes: id,name,avatar.

What if we don't need the avatar attribute?

We can ask the little brother, miss and sister in the back end to help remove avatar, or write a new interface to do this.

So can you control the fields you need on the front end?

The answer is yes, and GraphQL was born for it.The code block below is a graphQL query statement, which we can write when we only need the id and name of the account. If avatar is needed, we can add avatar.

{
  account {
    id
    name
  }
}

This allows graphQL to be more flexible than the restFul API and get the exact data you want.

Conclusion: Query statements are placed on the front end, which controls the data needed, so they are the query language for API.

Why use GraphQL?

• Field redundancy
• Get multiple data with one request
• Clearly describe all data types, data structures

How do I use GraphQL?

Here I use nestjs as the back-end server, and a little buddy who is not familiar with nestjs can point Here Learn nestjs.

1. Create Backend Service

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

1. Install graphQL-related dependencies

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

1. Reference GraphQLModule in Application Module

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

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

1. Set Schema's path so that GraphQL can detect our graphql files

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

1. Create our account query

Create a new folder named account under src with associated code files

# 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. Reference AccountModule in AppModule

// 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. Start nestjs service

yarn run start:dev

1. Visit http://localhost:3000/graphql To open the Playgroup query interface

In this way, our first graphQL is already written.

We can enter queries in the left panel of Playgroup:

{
  account(id:1){
    name
  }
}

Click the Query button and you will see the data we need:

At this point, a simple query of graphQL is complete. Since there is no associated database in the example, you can query the database in resolver yourself.