Adhithi Ravichandran
Mar 13, 2020 ⋅ 4 min read

GraphQL variables in simple terms

Adhithi Ravichandran Software consultant, Pluralsight author, speaker, React Native/React/GraphQL dev, and Indian classical musician. You can find me online at adhithiravichandran.com.

Recent posts:

Build Full-Stack App React Goxygen

Build a full-stack app with React and Goxygen

We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.

Clara Ekekenta
Dec 6, 2023 ⋅ 8 min read
Express Js Adoption Guide Overview Examples Alternatives

Express.js adoption guide: Overview, examples, and alternatives

Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]

Antonello Zanini
Dec 6, 2023 ⋅ 17 min read
Nesting web components in vanilla JavaScript

Nesting web components in vanilla JavaScript

Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.

Mark Conroy
Dec 5, 2023 ⋅ 10 min read
Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read
View all posts

3 Replies to "GraphQL variables in simple terms"

  1. Testing variables in some application is pretty straightforward. However, how do you use variables in a standard fetch call using code?

    1. In the body of the request stringify your graphql query like this:- hope it helps

      fetch(‘https://api.hashnode.com’, {
      method: ‘POST’,
      headers: {
      ‘Content-Type’: ‘application/json’,
      Authorization: ”,
      body: JSON.stringify({
      ‘mutation createStory($input: CreateStoryInput!){ createStory(input: $input){ code success message } }’,
      variables: {
      input: {
      title: ‘What are the e2e testing libraries you use ?’,
      contentMarkdown: ‘# You can put Markdown here.\n***\n’,
      tags: [
      _id: ‘56744723958ef13879b9549b’,
      slug: ‘testing’,
      name: ‘Testing’,
      .then(res => res.json())
      .then(res => console.log(JSON.stringify(res)))

  2. Thank you! After endless hours trying to use string interpolation to inject my $token into the GraphQL request and having to deal with needing to escape quotation mark characters, this helped me correctly use variables for my request.

Leave a Reply