Exploring the Playground

You can access the playground at https://app.pipefy.com/graphiql. Once you open it, this is the screen you’ll see, to understand better we can divide it into three parts:

Left Panel: Query Editor

This is where you write your GraphQL queries and mutations.

Key Features:

• Auto-Complete: Start typing {, query, or mutation and press Ctrl+Space (Windows) or Cmd+Space (Mac) to see suggestions.
• Syntax Highlighting: Keywords like query, mutation, and field names are color-coded.
• Prettify: Format messy code with the top-left button of the panel Prettify.

Example Query

{
  me {
    id
    name
  }
}

Right Panel: Response Panel

After running a query/mutation, the response (success or error) appears here in JSON format.

Key Features:

• Collapsible JSON: Click triangles (▶) to expand/collapse nested data.
• Error Highlighting: If there’s an error, it’ll show an errors array with details.

Example Response

{
  "data": {
    "me": {
      "id": "1",
      "name": "John Smith"
    }
  }
}

Top Right Button: Documentation

Click the Docs tab (top-right) to explore:

• Queries: Available data-fetching operations (e.g., cards, organizations).
• Mutations: Operations to modify data (e.g., createCard, deletePhase).
• Types: Data structures (e.g., User, Card, String types).

Query Example

Check out our Use Case Examples page for more!

When you open the playground screen, you already have the default query written on the Query Editor:

query {
  organizations {
    id
    name
  }
}

1. The query keyword indicates that this is a GraphQL query operation.
   1. Because the query is the default operation, you don’t need to write it explicitly. The query is formatted without that keyword by default.
2. The curly braces { } define the scope of the query.
3. organizations is the name of the query being executed.
4. The inner curly braces contain the fields we're requesting: id and name.

You can execute your query with Ctrl+Enter or click the play button:

As long as you are correctly logged in, a similar result should appear in the response panel:

{
  "data": {
    "organizations": [
      {
        "id": "123456",
        "name": "Sample Organization"
      }
    ]
  }
}

You just did your first query!