Global Data| Hitchhikers Platform

Overview

Often there is shared data that you want to use across all the pages on your site. You could hardcode this information, but sometimes you want this content to be configurable by a separate content team. In this scenario, you can use the Knowledge Graph to power global data via a Site Entity.


Knowledge Graph

First, you will want to create a site entity type and create one entity of that type. While the entity type and the schema can be anything you want, we recommend the following conventions:

  1. Create a new Site entity type.
  2. Add any relevant fields to this entity type.
  3. Create a single instance of your new of Site entity type.
  4. Populate the fields on the entity.

Here is an example of a template that uses global data.

const Static: Template<TemplateRenderProps> = ({ document }) => {
  const { _site } = document;

  return (
    <Layout footer={<div>©️ {_site.name}</div>}>
      <div>Hello World</div>
    </Layout>
  );
};


Stream Definition

Next, you need to define a site stream in sites-config/site-stream.json. Note: the name and location of this file are required to be sites-config/site-stream.json Below is an example definition. Note that unlike a stream in a template, this stream will filter by entityIds and not entityTypes.

{
  "$id": "site-entity",
  "filter": {
    "entityIds": ["SITE_ENTITY_ID_GOES_HERE"] // Site Entity ID
  },
  "source": "knowledgeGraph",
  "fields": ["name"], // Fields to pull from the entity type
  "localization": {
    "locales": ["en"],
    "primary": false
  }
}


Access Site Data

Once the site stream has been set up, you can then access the site data in any template, and there will be a new field on the document named __site. This property will contain any of the fields specified in the definition above. For example, the document might look like this:

Here is an example of a template that uses global data.

const Static: Template<TemplateRenderProps> = ({ document }) => {
  const { _site } = document;

  return (
    <Layout footer={<div>©️ {_site.name}</div>}>
      <div>Hello World</div>
    </Layout>
  );
};