Exploring GraphiQL: The In-Browser IDE for GraphQL

outlines/exploring-graphiql-the-in-browser-ide-for-graphql.md

@@ -0,0 +1,78 @@
+# Exploring GraphiQL: The In-Browser IDE for GraphQL
+
+## Introduction
+
+A. Definition and overview of GraphiQL
+
+## Why use GraphiQL?
+
+A. Advantages/benefits of using GraphiQL
+
+## Accessing GraphiQL
+
+For this guide, accessing GraphiQL can be done using any of the methods below:
+
+A. Simply head over to [https://tailcall.run/playground/](https://tailcall.run/playground/) and give your graphql server url in input. Note, make sure your graphql server allows cors for Tailcall domain
+
+B. After starting your [GraphQL server](https://tailcall.run/docs/#starting-the-graphql-server), head over to the GraphiQL playground link you get
+
+## Setting up GraphiQL
+
+A. Configuring GraphiQL
+
+B. Connecting GraphiQL to your Tailcall GraphQL server
+
+## How to add Headers in GraphiQL
+
+A. Access the Headers Panel right beside the variables panel at the bottom
+
+(add a screenshot of the Headers panel)
+
+B. Add Custom Headers
+
+```json
+# custom headers as JSON
+```
+
+C. Save and Close
+
+D. Run Your Query
+
+```graphql
+# query
+```
+
+## Exploring the GraphiQL Interface
+
+A. Exploring the GraphiQL interface and understanding the functions of the various panes.
+
+B. Explain each of the main parts in the GraphiQL interface
+
+- Query Editor
+- Variables Editor
+- Response pane
+- Documentation Explorer.
+
+[add screenshot to display the interface of each of these 4 main interface parts]
+
+## Best Practices
+
+A. Writing clear and well-structured queries.
+
+B. Using modular queries, i.e. breaking down complex queries into smaller and manageable chunks.
+
+C. Implement thorough/consistent query testing strategies to detect errors early.
+
+D. Adding in-line comments in your Query
+
+## Alternatives to GraphiQL
+
+A. Explain that there are also alternatives to GraphiQL. There are other GraphQL playgrounds like Insomnia, Altair client and so on
+
+(add a screenshot of each of the alternative)
+
+## Conclusion
+
+A. Summary of what we discussed
+
+B. Final thoughts on the subject