EasyGraph Quick Start - GraphQL

This is a follow up to the previous tutorial available at https://www.graphifi.com/easygraph-quick-start-delete

In previous posts we have seen how easy it is to create HTTP API requests in the Playground. In this post we are going to see how GraphQL queries and mutations can be created in the Playground.

Please note that the objective of this tutorial is to show how GraphQL requests can be generated from the Playground, so it is assumed that you are familiar with GraphQL concepts and we won’t go into the details of how GraphQL works. If you want to learn more about GraphQL go to https://graphql.org/

Before we start creating GraphQL requests we need to clear any data so that we can recreate the resources with GraphQL mutations. If we do not clear the data and try to recreate the resources with the same IDs EasyGraph will reject requests.

Data can be reset with RESET request. To add a RESET request in our scenario click on the top Plus button and you should see a popup menu as shown in the shot below.

From the menu select ‘Add Reset Data Request’. This should add a RESET request in the scenario as shown in the screenshot below.

Click the Play button in the title bar of the RESET request. You should see a success message in the title bar and if you expand the request you should see a 204 status code.

Next let us generate a GraphQL mutation to create a ‘Person’ resource. Expand the CREATE request with the title “Add a new person with givenName”. In the expanded request click on the Settings button on the left-hand side of the request SAVE button. You should see a Request Settings dialog as shown below.

Click on the Mode field and select GraphQL. Click SAVE to save the mode change. Next click on the Request tab and your screen should look as shown below.

As you can see in the screenshot above, the change in the Request Mode has

• Changed the endpoint of the request to the GraphQL server endpoint ( https://easygraph.graphifi.com/graphql ).
• Generated a GraphQL mutation query and loaded it into the GraphQL ‘Query’ editor
• Generated a GraphQL query variable and loaded it into the GraphQL ‘Query Variable’ editor

To execute the GraphQL mutation query click the Play button. You should see the GraphQL query response as shown in the screenshot below.

Next expand the SEARCH request and change its request mode to GraphQL. This should generate a GraphQL query as shown in the screenshot below.

As you can see in the above screenshot, the default query only selects the id field of the resource. To select other fields you will need to enter those fields. Click in the query editor and type ‘egETag’ and ‘givenName’ as shown in the screenshot below.

Click the Play button to execute the SEARCH request. You should see a success message and the Response tab should show the search results as shown below.

Next let us try a GraphQL mutation to update the resource. As explained previously change the Request Mode of the UPDATE request to GraphQL. Your screen should look as shown in the screenshot below.

Click in the ‘Query’ editor block and enter the following query:

mutation update($Person: PersonInput) {
  Person: update_Person(input: $Person) {
    id
    egETag
  }
}

Next we need to specify the value of the ‘Person’ variable used in the above query. Click in the ‘Query Variables’ editor block and enter the following:

{
  "Person": {
    "givenName": [
      "foobar"
    ]
  }
}

As explained in previous posts, for the update request we also need to specify the id and egETag of the resource. You can copy the id and egETag from the previous search response and paste it into the “Person” variable object. Once you have done the changes your screen should look similar to the screenshot below.

Note that for you the id and egETag will be different from what is shown in the screenshot above.

Click the Play button to execute the UPDATE request. You should see a response similar to the response shown in the screenshot below.

To verify the changes made through the update mutation you can re-execute the search request.

For a DELETE mutation the process is the same as for UPDATE. You will need to manually enter the query and variables. Below is a screenshot for a DELETE mutation.

As you can see the in screenshot above for DELETE mutations the name of the mutation starts with ‘delete_’

That is all for this tutorial series. In subsequent posts we will go through other features.

While trying EasyGraph if you find any bugs, have a feature request, or if you have any other suggestions you can contact us by using the feedback form in the application. To access the form click on your name or image in the top right corner of the application. You will see a popup as shown in the screenshot below.