GraphQL Documentation Generator

• 

  Screenshot 1

• 

  Screenshot 2

Inspiration

This application was inspired by GraphiQL, It categorizes all the Types, Queries, Mutations, Subscriptions in the way we code it, Making it easier for us to use and debug GraphQL Server Schemas.

We can easily filter through entire schema to find a single type/query/mutation/subscription we're looking for., I hope this will be beneficial to some as this has been beneficial to me.

What it does

It takes either GraphQL Server Endpoint or the Introspection Query Response and then processes the response and creates a UI resembling Kanban style.

One can easily see the UI and understand all the Types, Queries, Mutations, Subscriptions supported by the given GraphQL Server. Users can click on any card to find more information about it and can click on links within the card to keep finding related information.

How I built it

I build it using React, Create React App, GraphQL Introspection Query and AntD UI Library.

Challenges I ran into

Not any major challenges, I wanted a way to display the queries, mutations and subscriptions in the way we code it, Separated from the Types and build in types.

The Introspection Query didn't give that, I was able to modify the query to get the data in the way I wanted, It worked but had lot of duplicated data and many times the query didn't run on Githib and other servers so I decided to stick with the common Introspection Query.

The app processes the response, Create the data structure In the way I wanted and it works.

Accomplishments that I'm proud of

This looks pretty neat (to me), Has offline support so as soon as the response/data is processed it's saved in LocalStorage so even when we come back later we still have the data to play with instead of re-querying the server.

What I learned

Things that are easy to build might be useful to others, I though this would be a fun side project, But it turned out to be fun and really huge for my other GraphQL project.

What's next for GraphQL Documentation Generator

• Allow support for custom Authorization Headers
• Allow users to query multiple endpoints at the same time and store it locally.
• Allow users to test the queries/mutations live from within the app (this can be done easily by integrating GraphiQL client.)

Built With

• antd
• axios
• create-react-app
• react
• react-router