How to Use Pimcore as Headless PIM

Going headless is not only a trend in the content management and experience management market, but also in the field of product information management and master data management. The goal is to decouple different applications within the overall system architecture but let the data flow efficiently between all components.

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."

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

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

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

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

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.

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

If you want to follow along or help out, check out our blog on a regular basis. Or follow the development in real-time on GitHub. Or become Pimcore Partner and receive newsletters, invitations to webinars, and more.

Thanks for choosing Pimcore. See you soon for the next version!