2. GraphQL Query

프론트엔드 2019. 12. 26. 15:38
반응형

Public GraphQL APIs:
SWAPI : http://graphql.org/swapi-graphql
GitHub API : https://developer.github.com/v4/explorer
Yelp : https://www.yelp.com/developer/graphql

below examples will be run on : http://snowtooth.moonhighway.com < visit the url and type in queries

You can add multiple queries to a query document but you can only run 1 query at a time.

for example,

# Try to write your query here
query lifts{
  allLifts{
    name
    status
  }
}

query trails{
  allTrails{
    name
    difficulty
  }
}

if you run the query document above, GraphQL playgound will ask you to choose one query to run.
To run both queries at once, you need to wrap them into 1 query.

query liftsAndTrails {     // query : root type. fields that are availabled will be in the documentation.
  liftCount(status: OPEN)  // liftCount : fields chosen from GraphQL documentation
  allLifts{                // allLifts : fields chosen from GraphQL documentation
    name
    status                 //selection sets
  }
  allTrails {
    name
    difficulty
  }
}

Specifying the return field name

query liftsAndTrails {
  open: liftCount(status: OPEN)
  chairlifts: allLifts {
    liftName : name  // Like this!
    status
  }
  skiSlopes: allTrails {
    name
    difficulty
  }
}

result is:

{
  "data": {
    "open": 0,
    "chairlifts": [
      {
        "liftName": "Astra Express", // name field has been returned with the name "liftName"
        "status": "CLOSED"
      }
    ],
    "skiSlopes": [
      {
        "name": "Blue Bird",   // if not specified, returned by the name of the query's field name
        "difficulty": "intermediate"
      },
    ]
  }
}

Using arguments to select data

query jazzCatStatus {
  Lift(id: "jazz-cat") { // argument
    name
    status
    night
    elevationGain
  }
}

Built-In GraphQL Scalar Types:

  1. Int
  2. Float
  3. String
  4. Boolean
  5. ID
반응형

'프론트엔드' 카테고리의 다른 글

6. GraphQL Mutations  (0) 2019.12.26
5. GraphQL Interface  (0) 2019.12.26
4. GraphQL Union  (0) 2019.12.26
3. GraphQL Fragments  (0) 2019.12.26
1. What is GraphQL  (0) 2019.12.26
블로그 이미지

개발자_무형

,