DEV Community

loading...
Cover image for GraphQL Arguments & Variables 🚀

GraphQL Arguments & Variables 🚀

Henry Arbolaez
I'm a coffee lover, thinker, and a software engineer. I'm passionate about the idea of bringing people together to collaborate, to build a great product.
・Updated on ・2 min read

When writing a GraphQL Query, Mutation or Subscription you'll need to pass dynamic data to the query when making the request, to be able to make the app dynamic and respond to different data set.

Basic GraphQL Query

query currentUser {
  id
  firstName
  lastName
  email
}
Enter fullscreen mode Exit fullscreen mode

The above GraphQL query will fetch the authenticate the user. This query does not require any argument, due that the server should know how to return the authenticated user. Not a GQL thing, but in general good practice not to allow end-users to call a user endpoint and pass an i.e. user_id.

GraphQL query with arguments, without variables

query {
  educators(first: 25, ids: [1,2]) {
    edges {
      node {
        id
        firstName
        lastName
        schools {
          id
          name
          location {
            id
            name
            address
          }
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

educators take two arguments first of type Int and ids of type ID in a collection. This is how we define the arguments and assign the type to them (note: this could be named anything, it will be the response key name).

The SQL statement that matches the above GraphQL Query

SELECT * FROM educators
WHERE id in (1,2)
LIMIT 10;
Enter fullscreen mode Exit fullscreen mode

GraphQL query with variables

Now the same as the query above, with dynamic variables that we can pass to the query in execution time. This is great now because now this query can be reuse around multiple clients.

query educators($first: Int, $ids: [ID!]) {
  educators(first: $first, ids: $ids) {
    edges {
      node {
        id
        schools {
          id
          name
          location {
            id
            name
          }
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Varaibles definition

{
  "first": 25,
  "ids": [1,2]
}
Enter fullscreen mode Exit fullscreen mode

i.e. with Apollo Client hook example

import { useQuery } from '@apollo/client'

// GET_EDUCATORS_QUERY is the above query
useQuery(GET_EDUCATORS_QUERY,
  { variables: { first: 25, ids: [1,2] } }
);
Enter fullscreen mode Exit fullscreen mode

Conclusion

To help explore GraphQL Variables, you can use the GraphQL Playground. GraphQL variables give the flexibly of sending dynamic variables to the query and at the same time the ability to use the query in multiple clients that require to fetch the same data.

Discussion (0)