Is there a web interface to try the API?
  • 22 Jun 2022
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Is there a web interface to try the API?

  • Dark
    Light

Article summary

The different URLs

When we activated your access to one of our APIs you should have received a mail with at least one URL.

In general:

  • If the URL ends in "/api", it leads to the GraphiQL interface.
  • If the URL ends in "/graphql", it's the general endpoint you can use when not using GraphiQL.
  • You can change the URL by replacing "/api" with "/graphql" or vice versa to use the general endpoint or GraphiQL.

The GraphiQL UI

This is how a typical window looks like:
GraphiQL UI

Let's take a closer look at the different UI components:

Menu bar

MenuBar.png

  • "Play": Execute query.
  • "Prettify": Format your query — only works for queries with correct syntax.
  • "History": History of your requests.
  • "Docs": Show documentation.

Upper left half window

Enter your query here.

Right hand side of the window

See the results of the last executed query.

Lower left half window

You can define query variables and send a requst header. More about the request header below in "Authentication".

Documentation explorer

Only visible when "Docs" was clicked. This is the built-in documentation.

Authentication

Generally, you can only use the API when you authenticate with a token.

Request token via cURL

Add your client id and your client secret and request a token:

curl --request POST \
  --url https://promaterial.eu.auth0.com/oauth/token \
  --header 'content-type: application/json' \
  --data '{
       "client_id":"<Your Client ID>",
       "client_secret":"<Your Client Secret>",
       "audience":"http://mdg.promaterial.com/api",
       "grant_type":"client_credentials"
       }'

You get the following response:

{
  "access_token": "<Access token, valid for 24 hours>",
  "scope": "read:products read:order read:shoppingCart",
  "expires_in": 86400,
  "token_type": "Bearer"
}

Send token in request header

You can send the token in JSON format directly via the UI. Go to the left bottom to "REQUEST HEADERS" and add the token to the following syntax:

{ "Authorization": "Bearer <your token>" }

Example:
Example.png

Shortcuts

Available shortcuts:

  • CTRL + ENTER: Execute the query. If there is more than one query, the query where your cursor is placed is executed.
  • CTRL + SHIFT + P: Prettify.
  • CTRL + SPACE: Syntax completion.

Tips

  • Use the "Docs" to learn about the queries and fields.
  • While writing a query don't use line breaks but only spaces — Syntax completion works better like this. Format your query using "Prettify".
  • Get suggestions for what to type next by using CTRL + SPACE or
  • just start typing to get suggestions.
  • Choose a suggestions by using the arrow keys and confirm with TAB. You don't need to use the mouse.
  • If you don't get any useful suggestions, you might need to add round or curly brackets. You'll get a feeling for where to put brackets in no time.

Was this article helpful?