WHAT IS PLAYGROUND

Playground is a web-based tool that allows developers to interactively execute and test GraphQL queries against a GraphQL API. It provides an integrated development environment for exploring, testing, and debugging GraphQL queries and schemas. Developers can use Playground to experiment with different queries, view documentation, and understand the capabilities and structure of the GraphQL API.

GraphQL Playground user interface (UI) features: The below features make it a versatile and user-friendly environment for interacting with GraphQL APIs, enhancing query development and testing.

1. Query Editor: The central part of the Playground is a text editor where developers can write and edit their GraphQL queries and mutations. It often includes features like syntax highlighting, autocompletion, and error highlighting.
2. Response Pane: This area shows the results of executed queries. It provides the response data in a structured and readable format, often with options to toggle between JSON and a more user-friendly view.
3. Documentation Explorer: A tab or pane that provides detailed documentation for the GraphQL schema, including descriptions of types, queries, mutations, and their input/output structures.
4. Schema Explorer: A side panel or tab that displays the schema of the GraphQL API. It provides information about available types, queries, mutations, and their documentation. Developers can click on types and fields to autocomplete them in the query editor.
5. Query Variables: A section for defining variables that can be used in GraphQL queries. This allows developers to parameterize their queries and make them reusable.
6. HTTP headers: It allow you to customize your GraphQL requests. You can include authentication headers, specify response formats, and send custom data to the API. This flexibility is vital for secure access, query optimization, and tailoring requests to specific API requirements. Headers are typically input as key-value pairs within the Playground’s interface.
7. History and Storage: Developers can save and organize previous queries for quick access. It’s useful for keeping a history of queries and managing collections of saved queries.
8. Prettify: It is used  to format code or text in a more visually appealing and organized way. It involves consistent styling, proper indentation, and adherence to coding standards, improving code readability and maintainability.
9. Settings and Configurations: Developers can adjust settings related to the endpoint URL, headers, and other preferences, making it versatile for various development and testing scenarios.
10. Run/Play Button: It is used to execute your Graphql Query.
11. New Tab: To open a new tab, simply click on the “+” icon, and you can add a Playground.
12. Copy CURL: It refers to the action of copying a command-line (CURL) request in a specific format used for making HTTP requests, particularly with the command-line tool called cURL. cURL (short for “Client URL”) is a command-line utility for making HTTP requests to web servers.

You can see the below image for reference:

PARAMETERS

1. Request URL:

https://{company_instance_name}.ms.vryno.com/api/graphql/crm

For example:

If your Vryno CRM URL is https://test.app.vryno.com

In this case, “test” is your instance name and your request URL for API  will be https://test.ms.vryno.com/api/graphql/crm

2. HTTP Header: 

You need to add the access token here, with a prefix in a key-value pair as mentioned below where you can replace “your_access_token” with your actual access token.

To generate a new access token please click here.

For example:

{
  "Authorization": "Bearer your_access_token"
}

How to execute Graphql query in Playground

1. Access GraphQL Playground: Open your web browser and navigate to the URL where your GraphQL Playground is hosted as mentioned in Parameters.
2. Enter Your Query: In the query editor pane (usually on the left side), you can type or paste your GraphQL query or mutation. Ensure your query is properly formatted and follows the schema of the GraphQL API you’re querying.
3. Add Query Variables (if necessary): If your query requires variables, define them in the query variables pane (often at the bottom or in a separate tab). Provide values for the variables as a JSON object.
4. Set Headers : If your GraphQL API requires authentication or specific headers, you can add them in the settings or headers section. Headers are usually defined as key-value pairs as mentioned in Parameters.
5. Execute the Query: To execute the query, you can click the “Play” button (often a triangle or circular arrow icon) in the top-left corner of the query editor. Alternatively, you can use keyboard shortcuts like “Ctrl-Enter” or “Cmd-Enter.”
6. View the Response: The response data will appear in the response pane (usually on the right side). You can expand and collapse sections to view the data structure. It may also provide options to switch between JSON and more human-readable views.
7. Review Errors (if any): If there are errors in your query or if the API encounters an issue, error messages will be displayed in the response pane. Review these errors to identify and rectify any problems in your query.
8. Save Queries (optional): GraphQL Playground often allows you to save queries for future use. You can name and store them in the history or saved queries section.
9. Refine and Iterate: Based on the response and any errors, you can refine and iterate on your query until you get the desired results.