DEV Community

A Beginner’s Guide to GraphQL

Leonardo Maldonado on January 05, 2019

One of the most commonly discussed terms today is the API. A lot of people don’t know exactly what an API is. Basically, API stands for Applicati...

Read full post

Dan Braun • Jan 8 '19

In the example to return a single user:

query {    
    user(id: 1) {    
        id    
        name    
        email    
        age    
    }    
}

I get the error:

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Query.user.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "user"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "stacktrace": [
            "Error: Cannot return null for non-nullable field Query.user.",
            "    at completeValue (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:631:13)",
            "    at completeValueWithLocatedError (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:580:21)",
            "    at completeValueCatchingError (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:550:12)",
            "    at resolveField (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:497:10)",
            "    at /Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:364:18",
            "    at Array.reduce (<anonymous>)",
            "    at executeFields (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:361:42)",
            "    at executeOperation (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:289:122)",
            "    at executeImpl (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:154:14)",
            "    at Object.execute (/Users/danielbraun/Sites/graphql-server/node_modules/graphql/execution/execute.js:131:35)"
          ]
        }
      }
    }
  ],
  "data": null
}

Leonardo Maldonado • Jan 9 '19 • Edited

I really think that this error came from de db.js, did you uploaded it right? Can you upload this code in someplace? I may be able to help you if you do so.

Maarten Dings • Jan 9 '19

That's the type checking (===) failing there. I had the same issue. Replace the find functions to double equal checks instead of triple, then it should work: users.find(user => user.id == id)
Not sure why the typecheck doesn't work. Perhaps the ID! in schema.graphql is returning a string by default?

Dan Braun • Jan 9 '19

Yup, that was it.

Miguel Valdes • Feb 12 '19

spent like 30 mins trying to get it to work, triple = kills the functionality

Mayuran • Mar 13 '19 • Edited

This helped me better understand '==' vs '==='

github.com/getify/You-Dont-Know-JS...

EDIT: 'ID' type is serialised to String in graphql. So really, the comparison works as expected. If anything, this needs better error handling.

apollographql.com/docs/apollo-serv...

codeblogmoney • Sep 12 '20

This is very good article to explain what is GraphQL and why it's being used. I have been using graphQL for many time and this tool helped to read it better sometime from API, GraphQL Formatter jsonformatter.org/graphql-formatter.

Keep up the good work @leonardomso

rapidtables • Sep 12 '20

I like this formatting tool too.. and yes @leonardomso this is amazing article.

K • Jan 6 '19

Added this to my reading list :D

Do you have any resources concerning directives? I saw they're extensively used in AWS AppSync and seem really powerful.

Leonardo Maldonado • Jan 9 '19

I didn't work with AWS AppSync yet, so I won't be able to help you with that 😞

K • Jan 9 '19

No problem.

I just had the impression directives are a general GraphQL concept :)

Riekus van Montfort • Jan 6 '19 • Edited

Thanks for the very comprehensible intro to graphQL!

If I may add, the part about deleting users is a little confusing:

deleteUser: we should pass an ID, name, email, and age. It should return a new user to us.

It shouldn't return a new user, am I right? And is there a particular reason you want to return the user after deleting it?

Leonardo Maldonado • Jan 6 '19

Oh, my bad. It should return the deleted user to us, just to make sure that the mutation worked fine.

Tomek Poniatowicz • Jan 8 '19

A good read, thanks!
@Schema part: Now it's easier to fully understand a schema with visualization provided by GraphQL Editor (graphqleditor.com/). Just upload it from URL and enjoy beautifully drawn schema :)

Stephen Dicks • Jan 8 '19

The error handling in delete is interesting. REST would dictate that the deletion of a non existant user works (idempotency) and hence that the deleted user cannot be returned. Does GraphQL not have this concept?

Leonardo Maldonado • Jan 9 '19

I don't know if I understood correctly what you mean, but the way I think is, instead you return the deleted user you could return anything like a string saying "User deleted!" or something.

Stephen Dicks • Jan 9 '19

I was asking if GraphQL had the REST concept of idempotency (i.e. if you repeat a data-altering operation, then it behaves the same way - hence the 'deleting a deleted user'). Your implementation isn't idempotent, and I was asking if it should have been. Obviously if you delete something that's not there, the only sensible reply is probably 204 - again REST (IIRC) says this is what you should do, GraphQL...?

PrasadChillara • Jan 8 '19

Nicely explained Leonardo! Thank you !!

chengxi • Feb 5 '21

Hello, Thanks for your post!!
I am using the graphql in vue js
so api is frontend-test-api.aircall.io/graphql
and query is as follows
query call($id:ID!) {
Call {
id
direction,
from,
to,
duration,
via,
is_archived,
call_type,
created_at,
notes{
id,
content
}
}
}
but I am getting the 404 errors
can you help me?

Saulo Vargas • Jan 7 '19

Hola Leonardo.
Can it become a series? 🤔

Leonardo Maldonado • Jan 7 '19

Yes, why not? I've been thinking to write a series about GraphQL, explaining more deep about Queries, Mutations, and Subscriptions. What do you think?

Saulo Vargas • Jan 7 '19

I'll be looking forward for it.
Please do it!

Clément Blanco • Jan 14 '19 • Edited

deleteUser: we should pass an ID, name, email, and age. It should return the deleted user to us.

Typo here. Only the ID is necessary.

Diego Penha • Jan 7 '19

Muito foda cara, parabéns pelo artigo e muito obrigado por uma explicação tão concisa, simples e bem descrita!

Leonardo Maldonado • Jan 7 '19

Obrigado!!!

Daniel Wirtz • Jan 6 '19

Hey Leonardo! I was just looking for a comprehensive and good tutorial on the topic. Great writeup, really helped me!

Adrian Albu • Jan 8 '19

Not sure why but for me the strict eq comp operator didn't work but the abstract one did, like they are of different type?!

Anyway with == (user => user.id == id) it did work (in latest chrome...)

Alfonso • Jan 7 '19

Clear and simple explained.
Nice post mate! 😊

bhaRATh • Aug 12 '20

what about relational data (class has students ). example:hasMany, belongTo

Rushan S J • Mar 25 '21

Wow, this was an amazing article. Been searching this from ages !

Harold Villalobos • Aug 9 '19

Leonardo excelent post, thank you very much

Francesca Capochiani 🌺 • Dec 14 '19

Added to my reading list, too!
Thank you @leonardomso

Ahmed Rebai • Dec 23 '19

Good Job, Nice explication, What about Graphql integration with microservices architecture

Seanmclem • Apr 19 '20

Does GraphQL rely on a mongoDB server? Or does it directly run within a node instance? If the later -how does this work? The database is stored on the node-server?