GraphiQL

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: https://api.skedulo.com/graphql/graphql. Results are returned as a JSON object.

Enable the GraphiQL connected page

You can enable the GraphiQL global connected page 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 Connected pages -> Web app.
  4. Select GraphiQL, then click Publish.

Click Unpublish to remove the GraphiQL connected page 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 {
        UID
        Name
      }
    }
  }
}

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 connected pages by modifying the DataServices.ts file in your connected page project directory, and display this data by using the App.tsx file to arrange and render it appropriately.

For more information about GraphQL, see the GraphQL chapter.

Creating queries using GraphiQL

You can use GraphiQL to build and test your GraphQL queries when building connected pages. 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 connected page 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 connected page in the following way.

Prerequisite

You have added the GraphiQL connected page in your Skedulo web application.

  1. Open the GraphiQL connected page 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