How to Use GraphQL- Advanced Tutorial: Tools and Ecology

How to Use GraphQL- Basic Tutorial: More Concepts – continue to translate How to GraphQL.

Learn about the GraphQL ecology and its powerful tools, such as GraphiQL, Playground, or introspective self-generated documentation.

Basic and advanced series translations have been completed:

1. introduce
2. GraphQL has advantages over REST
3. The core concept
4. architecture
5. The client
6. The service side
7. More concepts
8. Tools and Ecology
9. security
10. Q&A

As you’re probably aware, the GraphQL ecosystem is growing at a phenomenal rate right now. One of the reasons for this is that GraphQL makes it really easy to develop great tools. In this section, you’ll learn why it’s easy and some of the great tools you already have in ecology.

If you’re familiar with GraphQL basics, you probably know how GraphQL’s type system allows you to quickly define the structure of the API. This allows developers to clearly define the functionality of the API and validate incoming queries against the schema.

The amazing thing about GraphQL is that these capabilities are not only known to the server. GraphQL allows clients to ask servers for information about their schema. GraphQL is called introspection.

introspection

Schema designers already know the structure of the schema, but how can clients view the content that is accessible through the GraphQL API? You can query this information to GraphQL by querying the __schema meta-field, which is always available on the root type of the query according to the specification.

query {
  __schema {
    types {
      name
    }
  }
}
Copy the code

Take the following schema definition as an example:

type Query { author(id: ID!) : Author } type Author { posts: [Post!] ! } type Post { title: String! }Copy the code

If you were to send the introspective query above, you would get the following result:

{
  "data": {
    "__schema": {
      "types": [{"name": "Query"
        },
        {
          "name": "Author"
        },
        {
          "name": "Post"
        },
        {
          "name": "ID"
        },
        {
          "name": "String"
        },
        {
          "name": "__Schema"
        },
        {
          "name": "__Type"
        },
        {
          "name": "__TypeKind"
        },
        {
          "name": "__Field"
        },
        {
          "name": "__InputValue"
        },
        {
          "name": "__EnumValue"
        },
        {
          "name": "__Directive"
        },
        {
          "name": "__DirectiveLocation"}]}}}Copy the code

As you can see, all types on the schema are queried. We get both the defined object type and the scalar type. Can even be introspective introspective type!

There are many more introspective type names available. Here’s another example:

{
  __type(name: "Author") {
    name
    description
  }
}
Copy the code

In this example, the __type meta-field is used to query for a single type and ask for its name and description. Here is the result of this query:

{
  "data": {
    "__type": {
      "name": "Author"."description": "The author of a post."}}}Copy the code

As you can see, introspection is an extremely powerful feature of GraphQL, and we only scratched the surface. The fields and types available in introspection schema are described in more detail in the specification.

Many of the tools in the GraphQL ecosystem use introspection systems to provide amazing functionality. Document browsers, auto-completion, code generation, anything is possible! One of the most useful tools you need to build and use the GraphQL API that makes heavy use of introspection is GraphiQL.

GraphQL Playground

GraphQL Playground is a powerful “GraphQL editor” that works interactively with the GraphQL API. It is an editor for GraphQL queries, changes, and subscriptions, with auto-completion and validation capabilities, and a structure (supported by introspection) document browser for quick schema visualization. It can also display query history, or use multiple GraphQL apis at the same time. It also integrates seamlessly with GraphQL-Config.

This is a very powerful development tool. For example, it allows you to debug and try queries on the GraphQL server instead of writing regular GraphQL queries on curl.

---

Front-end notepad, not regularly updated, welcome to pay attention to!

• Wechat official account: Lin Jingyi’s notepad
• Blog: Lin Jingyi’s notebook
• Nuggets column: Lin Jingyi’s notebook
• Zhihu column: Lin Jingyi’s notebook
• Github: MageeLin

---