How to Use Pimcore as Headless PIM

The typical data binding glue of this system architecture is GraphQL, a very flexible query language for data. But let's step back and have a look at PIM again. The core concept of a PIM is to provide rich product content for 3rd party applications and key users. In that regard, open-source Pimcore is both a decoupled PIM and a headless PIM system and provides data via the Pimcore Datahub and GraphQL to 3rd party applications and internal APIs to Pimcore's internal multichannel publishing functionalities. Best of both worlds.

In terms of a headless PIM, Pimcore is compatible with any application that can query and consume GraphQL based content. Let it be programming libraries such as React, Vue.js, and Angular or static site generators such as Next.js, Hugo or GatsbyJS. Pimcore can deliver the right product content to the correct output channel in GraphQL within minutes. In that regard, Pimcore is, of course, also compatible with the Jamstack philosophy.

Let's set up a whole headless product information management setup with Next.js delivery in less than half an hour. Of course, we are aware that we could have also just used the internal Pimcore rendering functionalities. But in this case, we explicitly want to go the headless route via GraphQL and deliver product content to Next.js, a popular open-source React-powered static site generator. As Pimcore installation, we utilize the public demo, which is available at https://pimcore.com/en/try.

Let's login into the demo

In the first step, we set up a new data model (=Pimcore Class) "Test."

Open Lightbox

In this case, we have kept the data model really easy and have just two fields, "name" and "description." Now we add some content

Open Lightbox

Data model: Done. Added two content pieces: Done. Now let's set up the GraphQL datahub and add our "Test" data model.

Open Lightbox

Now define the permissions, the workspaces, and the API key:

Open Lightbox

Let's now check the GraphQL API for our defined data. Done.

Open Lightbox

Now let's install Node.js and Next.js on the local machine to test the headless PIM functionalities. First of all, we build a simple Next.js page. This page simply calls the Pimcore GraphQL API to get the product data and outputs the Pimcore products.

Open Lightbox

That's it. We are done. Now Pimcore can be used as a headless product information management software and deliver the right product content via GraphQL to 3rd party frontend applications.

Get more information about PIM