GraphiQL web extension

Installing the GraphiQL web extension in the Skedulo web application.

GraphiQL is an interactive, in-browser GraphQL IDE that can be used to execute GraphQL queries for test and development purposes.

The GraphQL query language provides standardized access to different backend data sources, and supports all standard Skedulo objects, custom objects, and fields.

Using GraphQL, you can query parts of the object graph to retrieve only the specific results you are interested in, rather than using separate REST endpoints for each data object. Queries are JSON encoded and sent to a single endpoint: Results are returned as a JSON object.

Enable the GraphiQL web extension

You can enable the GraphiQL global web extension in the Skedulo web application:

  1. Log in to the Skedulo web application.
  2. Click your user profile in the upper-right corner and select Settings.
  3. Click Extensions -> Standalone Web Extensions.
  4. Select GraphiQL, then click Publish.

Click Unpublish to remove the GraphiQL web extension from the web application.

Run the GraphQL examples

You can use GraphQL to query specific fields on objects. GraphiQL includes some simple example queries for demonstration purposes. For example, the simple query to fetch regions:

query fetchRegions {
  regions {
    edges {
      node {

Returns the following information about the regions we have set up in our Skedulo web application:

  "data": {
    "regions": {
      "edges": [
          "node": {
            "UID": "00030443-08b8-4612-a55a-75cb600e2729",
            "Name": "Brisbane"
          "node": {
            "UID": "00035c4b-f31a-45b8-88a8-73a1a863a293",
            "Name": "Sydney"
          "node": {
            "UID": "0003b50f-a43d-4e79-9d9d-4025357f5838",
            "Name": "Perth"

You can use GraphQL queries to retrieve data for your web extensions by modifying the DataServices.ts file in your web extension project directory, and display this data by using the App.tsx file to arrange and render it appropriately.

For more information about GraphQL, see Use GraphQL.

Creating queries using GraphiQL

You can use GraphiQL to build and test your GraphQL queries when building web extensions. You can use the provided default queries, or build your own using the provided documentation as a reference. To view the schema Documentation Explorer, click the < Docs button in the upper-right corner of the GraphiQL web extension to open the Documentation Explorer and search the schema for the fields you want to include in your query.

For example, you can create a GraphQL query in the GraphiQL web extension in the following way.


You have added the GraphiQL web extension in your Skedulo web application.

  1. Open the GraphiQL web extension and open the Documentation Explorer.

  2. Search the schema for “NewProducts”.

    GraphiQL Documentation Explorer

    From here we can see that the list of fields that are available for the NewProducts type.

  3. Write a mutation query that creates a new product. You can use the createJob default query in the GraphiQL page as an example to get you started. The products mutation query has the variable name $input with the type NewProducts as it appears in the schema. GraphiQl provides autocompletion and will help you fill out the fields as you go.

    NewProducts mutation query

  4. Provide an $input variable of the type NewProducts for the query to run on. Again, GraphiQL will prompt you for the fields that it requires, however they are also available in the Documentation Explorer window on the right.

    NewProducts variable definition

  5. Click the play button and select createProduct from the list of queries to run the query and check that it works correctly.

    Run createProduct query

    If successful, the JSON response should provide a UID for the newly created product.

    Successful NewProduct mutation query