

Object types are said to "implement" an interface when they include all of the fields that the interface defines. With interfaces, we can encapsulate a set of fields that one or more object types have in common.

So if we have two or more types that each define a common set of fields, alongside some fields all their own, what's the best way to organize them? How can we represent the similarity between types and preserve their object type boundaries simultaneously? To see how we can use just one field to query both Fruit and Vegetable types, let's talk about interfaces! Introducing Interfaces In the FruitOrVegetable type example, we have several fields that are irrelevant for much of the data this type should represent. The single source of truth we get from a schema is only as good as our ability to rely upon the capabilities it describes. When we create a type that includes irrelevant or non-existent data, we neglect one of the core strengths of GraphQL. But if we cram two types together, unique attributes included, someone could reasonably ask for a fruit's vegetableFamily, or a vegetable's list of ripenessIndicators - and wonder why they don't get the data they're expecting! Object types allow us to draw clear boundaries around a type of thing in our service, and its different details we might want to query for.

But this approach creates more work for anyone using the graph - and it doesn't actually represent the reality of our data! Well, it might seem like a small problem now when we're talking about fruits and vegetables.
Graphql query beautifier how to#
While you can use other tools, we recommend Sandbox as the best way to get started.įor demonstrations of other ways to make GraphQL requests, read “ 4 Simple ways to Call a GraphQL API“.įor more on sending GraphQL requests with HTTP, read “ POST and GET format - How to send requests to Apollo Server over HTTP” from the official Apollo Server docs.When we run this query, we'll see that even our fruit objects have a vegetableFamily property - but its value is null! The same is true of our vegetable objects: we see a hasEdibleSeeds property even though vegetables, by definition, contain no seeds.īut why does this matter? We could just accept the null values for the fields that don't apply for each type, right? If you’re just getting started with Apollo Server, you’ll see a screen similar to the following when you visit your running server in the browser.Ĭlicking “Query your server” takes you to Apollo Studio’s sandbox and gives you an environment where you can quickly navigate and test out your GraphQL server. We also looked at some of the nuances and limitations of each approach. In this post, we discussed how you can use HTTP GET and POST methods to send GraphQL requests. Let’s assume we have a basic Apollo Server that returns a greeting with an optional name variable: const Conclusion You’re familiar with the basics of Apollo Server and have completed the getting started guide.You know the difference between a query and a mutation.We’ll also discuss the limitations of each approach. In this post, we’ll learn how to make GraphQL requests over HTTP with just GET and POST methods. While we recommend using Apollo Studio’s Sandbox, since GraphQL runs on top of HTTP, it’s possible to make GraphQL requests using any of the tools you were accustomed to using building out your apps with REST. When I first started learning about GraphQL, I thought that I needed a special tool to make GraphQL requests.
