• Pre-knowledge portal GraphQL to get started

4.1 Basic Query

Get the data you need as needed

// Define type consttypeDefs = gql`
  type Hero {
    name: String
    age: Int
  }

  # query type
  typeQuery { hero: Hero } `; // resolver const resolvers = {Query: {hero: () => {return {
        name: 'nordon',
        age: 18
      }
    }
  },
};

Copy the code
{hero {name}} {hero {name}}"data": {
    "hero": {
      "name": "nordon"}}}Copy the code
  • Matters needing attention
    • GraphQL has only one UTL address from which all information queried by the client is retrieved
    • There is a greater need to get specific data based on actual needs

4.2 Operation Name

When you have more than one operation, the operation name is required and is best added for debugging purposes

  • Rule – Operation Type Operation name (Custom operation name)
  • There are two main types of operations
    • Query is used to query.
    • Mutation is used for data changes — CRUD
Define the data type
const typeDefs = gql`

  # input type
  input UserInfo {
    name: String
    pwd: String
  }

  # User type
  type User {
    id: ID
    name: String
    pwd: String
  }

  # change type
  type Mutation {
    addUser(userInfo: UserInfo): User
  }

  # query type
  typeQuery { hello: String msg: String } `; Const resolvers = {Query: {hello: () => const resolvers = {Query: {hello: () =>'hi query',
    msg: () => 'msg query'
  },
  Mutation: {
    addUser: (parent, args) => {
      return {
        id: uuid(),
        name: args.userInfo.name,
        pwd: args.userInfo.pwd
      }
    }
  }
};

Copy the code
Select * from 'query' where 'query' = 'query';

query helloInfo {
  hello
}

query msgInfo {
  msg
}

mutation addUser {
  addUser(userInfo: {
    name: "nordon".pwd: "123123"
  }){
    id
    name
    pwd}}Copy the code

01.png

  • Matters needing attention
    • You are advised to add an operation name to all query and change operations

4.3 Querying Parameters

You can use query parameters when you need to query data based on specific criteria

const typeDefs = gql`
  # Student type
  type Student {
    name: String
    age: Int
    gender: Boolean
  }

  # query type
  type Query {
    hello: String
    stu(id: Int, name: String): Student
  }

`;

const resolvers = {
  Query: {
    hello: () => 'Hello world! ',
    stu: (parent, args) => {
      let stu = null;

      if(args.id === 1 && args.name === 'nordon'){
        stu = {
          name: 'norodn',
          age: 18,
          gender: true}}else {
        stu = {
          name: 'null',
          age: 0,
          gender: false}}return stu
    }
  },
};
Copy the code
query stu {
  stu(id: 1, name: "nordon"){
    name
    age
    gender
  }
}
Copy the code

02.png

  • Matters needing attention
    • Query fields can take parameters and can take multiple parameters separated by commas

4.4 variable

Sometimes the parameters of a field need to be supplied dynamically rather than with fixed values, and you can use variables, like parameters in a function

// Define the data type consttypeDefs = gql`
  # Course type
  type Course {
    cname: String
    score: Float
  }

  # Student type
  type Student {
    id: ID
    sname: String
    age: Int
    scores(num: Float): [Course]
  }

  # query type
  typeQuery { stu(id: Int): Student } `; Const resolvers = {Student: {scores: (parent, args) => {return parent.scores && parent.scores.filter(item => item.score > args.num)
    }
  },
  Query: {
    stu: (parent, args) => {
      if(args.id === 1){
        return {
          id: uuid(),
          sname: 'nordon',
          age:18,
          scores: [{
            cname: 'mathematics',
            score: 66
          },{
            cname: 'English',
            score: 55
          },{
            cname: 'Chinese',
            score: 77
          }]
        }
      }else{
        return {
          id:0,
          sname: 'null',
          scores: null
        }
      }
    }
  },
};
Copy the code

03.png

04.png

  • Matters needing attention
    • Variable types must be scalar, enumerated, input object types
    • Variables can have default values ($id: Int = 1)

4.5 instruction

Sometimes the number of fields in a query is not fixed and can be controlled in a specified way

  • Two instructions
    • @include(if: Boolean)Only if the parameter istrueContains this field
    • @skip(if: Boolean)If the parameter istrueSkip this field when
// Define the data type consttypeDefs = gql`
  # Student type
  type Student {
    id: ID
    name: String
    gender: Boolean
  }

  # query type
  typeQuery { stu(id: Int): Student } `; Const resolvers = {Query: {stu: (parent, args) => {if(args.id === 1){
        return {
          id: uuid(),
          name: 'nordon',
          gender: true}}else{
        return {
          id: uuid(),
          name: 'wangyao',
          gender: false}}}},};Copy the code
# If the instruction uses a pass field that needs to be displayed, add one after it! Exclamation point
query stu($id: Int, $gender: Boolean!) { stu(id:$id){
    id
    name
    gender @include(if: $gender)
    # gender @skip(if: $gender)}}Copy the code

05.png

06.png

  • Matters needing attention
    • You can use these two instructions to dynamically control the number of fields in the query
    • The variable definition used by the directive needs to be added! Exclamation mark, force must provide the value

4.6 the alias

Use different parameters to query the same field information, such as students’ math and English scores

// Query is the default client Query type and must exist on the server and be a unique consttypeDefs = gql`
  # Course type
  type Course {
    cname: String
    score: Float
  }

  # Student type
  type Student {
    id: ID
    sname: String
    age: Int
    scores(cname: String): [Course]
  }

  # query type
  typeQuery { stu: Student } `; Const resolvers = {Student:{scores: (parent, args) => {if(args.cname === 'mathematics' || args.cname === 'Chinese') {return parent.scores.filter(item => item.cname === args.cname)
      }else{
        return parent.scores
      }
    }
  },
  Query: {
    stu: (parent, args) => {
      return {
        id: uuid(),
        sname: 'nordon',
        age:18,
        scores: [{
          cname: 'mathematics',
          score: 66
        },{
          cname: 'English',
          score: 55
        },{
          cname: 'Chinese',
          score: 77
        }]
      }
    }
  },
};
Copy the code
query stu{
  stu{
    id
    sname
    math: scores(cname: "Mathematics"){
      cname
      score
    },
    china: scores(cname: "Chinese"){
      cname
      score
    },
    all: scores{
      cname
      score
    }
  }
}
Copy the code

07.png

  • Matters needing attention
    • You can alias specific items of data (query interface data format is the same)

4.7 change

Changing server data requires a mutation operation

// Query is the default client Query type and must exist on the server and be a unique consttypeDefs = gql`
  # input type
  input UserInfo {
    uname: String
    pwd: String
  }

  # User type
  type User {
    id: ID
    uname: String
    pwd: String
  }

  # change type
  type Mutation {
    addUserByParams(uname: String, pwd: String): User
    addUserByInput(userInput: UserInfo): User
  }

  # query type
  typeQuery { hello: String } `; Const resolvers = {Query: {hello: () => const resolvers = {Query: {hello: () =>'Hello world! '
  },
  Mutation: {
    addUserByParams: (parent, args) => {
      return {
        id: uuid(),
        uname: args.uname,
        pwd: args.pwd
      }
    },
    addUserByInput: (parent, args) => {
      return {
        id: uuid(),
        uname: args.userInput.uname,
        pwd: args.userInput.pwd
      }
    }
  }
};
Copy the code
mutation addUserByParams {
  addUserByParams(uname: "nordon".pwd: "123123"){
    id
    uname
    pwd
  }
}

mutation addUserByInput($userInput: UserInfo){
  addUserByInput(userInput: $userInput){
    id
    uname
    pwd}}Copy the code

08.png

  • Matters needing attention
    • The change operation is implemented with the mutation keyword
    • The userInput variable is not a scalar but an input type
    • Parameters can be passed by ordinary parameters, input types can also be used, generally more complex data input type

Refer to the website

GrapgQL website

Apolloserver website