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.

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!

Dietmar Rietsch
  • CEO
23 articles by this author

Więcej aktualności o Pimcore

Pimcore X, the tenth release of the leading open-source Pimcore Platform will be released officially with the first release candidate on March 31, 2021. Ten years of Pimcore, ten...
lutego 03, 2021
An efficient workflow management of a PIM system helps managers effortlessly create and customize workflows as needed to boost accuracy and productivity.
grudnia 04, 2020
At Pimcore Inspire 2020, Frank Trimborn from our Gold Partner anyMOTION presented one of their most recent projects with Brouwland. Frank showed how they implemented a PIM through...
stycznia 29, 2021

100 000+ businesses trust Pimcore. Discover our 250+ favorite success stories.