From 4cd6a9f6da5c40b982f975d109431ab95fe7382e Mon Sep 17 00:00:00 2001
From: Shegzi <66688833+shegz101@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:45:25 +0100
Subject: [PATCH] Exploring GraphiQL: The In-Browser IDE for GraphQL (#338)

---------

Co-authored-by: Bobate Olusegun <bobatesegun3gmail.com>
Co-authored-by: Amit Singh <amitksingh1490@gmail.com>
---
 ...graphiql-the-in-browser-ide-for-graphql.md | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 outlines/exploring-graphiql-the-in-browser-ide-for-graphql.md

diff --git a/outlines/exploring-graphiql-the-in-browser-ide-for-graphql.md b/outlines/exploring-graphiql-the-in-browser-ide-for-graphql.md
new file mode 100644
index 0000000000..29e9e56bdb
--- /dev/null
+++ b/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