How to use GraphQL (data-hub) in Pimcore 5

Pimcore 5 offers a new package to use GraphQL. That way you can make Pimcore 5 headless. This means you can access Pimcore data, without having to visit that website, and without using REST or SOAP. The package for GraphQL is called data-hub and is still in dev, though it already works.

Add GraphQL (data-hub) package to Pimcore

  1. Add the "GraphQL" package to Pimcore with Composer. The package is called data-hub.

    composer require pimcore:data-hub:dev-master
  2. The package needs to be activated an installed. Go in Pimcore to Tools (tool-icon) > Extensions

  3. Click on the green plus-button on the line "PimcoreDataHub" (column Enable/Disable).

  4. You see a confirmation window. Click that away.

  5. Click on the install-icon on the same line.

  6. Refresh the browser.

Configure the data-hub.

If all goes well, you should see the "Datahub config" option under the Settings menu (gear-icon). If not, ensure the package is properly installed (or try to reinstall it).

To add a GraphQL configuration, clicking the "Add Configuration" button and select "GraphQL".

Scheme Definition

Click the Schema Definition tab .

First add the object-type you want to be queryable. In this example I use a custom object called "Fridge". (step 1)

To configure this object, click the gear icon (step 2).

You see the fields of this object in the left column. Drag and drop the fields you want to enable for the GraphQL query to the right column.

Security Definition

Click the Security Definition tab. (step 1)

Your api (= GraphQL service) must be protected by an api-key, to limit unauthorized access. The party (or application) that needs to query the data, must have a copy of that key. (step 2)

Now that you’ve configured the object, you must also select the folder of the objects that must be query-able. Objects outside those folders won’t be found. Drag and drop a folder in "Objects". (step 3)

Click "save" (step 4).

Enter queries

Click "Open in tab" to start experimenting.

The query-language of GraphQL is explained on the official GraphQL website, so I won’t go into detail about that.

  getFridge (id: 141) {

You can enter this as a test and you should see the results after clicking on the play-button (arrow) in the top bar.

You say "getFridge" with id 141; show the fields: name, id, description

You can only select the fields you’ve configured in the scheme definition. So if you want more fields, you have to go back to the configuration window.

Access api

You can access the api through the following url:

Where you replace: "", "fridge" (by the name of the configuration) and "abc" by the api-key.

Then you send to that api the complete query (with the braces), for instance with an ApolloClient (not covered in this blogpost). You should get the appropriate response.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.