Fabric API for GraphQL editor

Note

Microsoft Fabric API for GraphQL is in preview.

The Fabric API for GraphQL provides a graphical in-browser GraphQL development environment, which enables an interactive playground to compose, test, and see the live results of your GraphQL queries and mutations.

To go to the editor, open the API for GraphQL item in Fabric and select Query at the lower left corner of your portal screen.

You can type code directly on the Query tab. Intellisense capabilities are available with a keyboard shortcut: CTRL + Space (Windows), or Command + Space (macOS).

Development of queries and mutations

Review the following short GraphQL schema, which defines a single Post type with queries to read a single post or list all posts. It also defines mutations to create, update, or delete posts supporting all CRUDL (create, read, update, delete, list) use cases.

type Post {
  id: ID!
  title: String!
  content: String!
  author: String!
  published: Boolean
}

type Query {
  getPost(id: ID!): Post
  getAllPosts: [Post]
}

type Mutation {
  createPost(title: String!, content: String!, author: String!): Post
  updatePost(id: ID!, title: String, content: String, author: String, published: Boolean): Post
  deletePost(id: ID!): Boolean
}

You can read the data exposed via GraphQL using any query defined in the schema. The getPost query should look like the following example.

query MyQuery {
  getPost(id: "1234") {
    title
    content
    author
  }
}

Response:

{
  "data": {
    "getPost": {
      "title": "First Post",
      "content": "This is my first post.",
      "author": "Jane Doe"
    }
  }
}

Write data using mutations like createPost to create a post with the required parameters.

mutation MyMutation {
  createPost(title: "Second post", content: "This is my second post", author: "Jane Doe", published: false) {
    id
    title
    content
    author
  }
}

Response:

{
  "data": {
    "createPost": {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }
  }
}

Query variables

Use the Query variables pane on the right side of the Query tab to pass any parameters as variables to your queries or mutations. Variables work the same way as variables in any other programming language. Each variable needs to be declared with a name that is used to access the value stored in it. With the previous mutation example, you can modify it slightly to use query variables.

mutation MyMutation ($title: String!, $content: String!, $author: String!){
  createPost(title: $title, content: $content, author: $author) {
    id
    title
    content
    author
  }
}

Define the variables in the pane like the following example.

    {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }

Variables make the mutation code cleaner and easier to read, test, and modify the parameters.

Related content

• Fabric API for GraphQL schema view and Schema explorer