Content Sources in Optimizely Graph?

Optimizely Graph offers endpoints that enable customers to seamlessly integrate custom content types from external sources such as CMS and Product Catalogs into the Optimizely Graph. Once this data is defined and indexed, it gains access to the full suite of Optimizely Graph capabilities, including Full Text Search, Faceted Search, and Semantic Search.

How do I define a content type?

This is done by creating a schema definition as shown in the example below and leveraging the Sync API for Content Types endpoint

{
  "label": "Wordpress Posts",
  "languages": ["en"],
  "contentTypes": {
    "WordpressPosts": {
      "contentType": [],
      "properties": {
        "_ts": {
          "type": "Date"
        },
        "Source": {
          "type": "String"
        },
        "Id": {
          "type": "String"
        },
        "Thumbnail": {
          "type": "String"
        },
        "Title": {
          "type": "String",
          "searchable": true
        },
        "Content": {
          "type": "String",
          "searchable": true
        }
      }
    }
  }
}

How do I synchronize data to my Content Type?

The sync can be performed by invoking the Sync Content Data endpoint which indexes the content and makes it available for query via GraphQL

The content data endpoint makes use of nd-json(Newline delimited JSON) format.

When pushing content into Optimizely Graph, an example entry looks like following:

{"index":{"_id":"wp-example","language_routing":"en"}}
{"Id":"wp-example","_ts":"2023-10-05T11:21:51Z","Source":"wordpress","Title___searchable":"Hello World - Wordpress","Content___searchable":"This is a manditory hello world test","ContentType":["WordpressPosts","ExternalPosts"],"Status":"Published","RolesWithReadAccess":"Everyone"}

Here Line 1 indicates the index entry followed by the Line 2 which indicates the actual data associated with the index entry

To perform update/delete operations on the data above you would need to use the same _id parameter from the index entry

WordPress Example

I’ve implemented a simple Next.js based middleware that can ingest data coming from WordPress directly into Optimizely Graph with the help of webhooks. I’m using WP Webhooks plugin to trigger the webhooks on the following scenarios:

  • Post Created
  • Post Updated
  • Post Trashed

The flow of the data between the external Content Source and the Next.js Middleware looks something similar to the following:

sequenceDiagram External Data Source->>Next.js Middleware: Content Published/Unpublished Next.js Middleware->>Optimizely Graph: Synchronize Changes Frontend App-->>Optimizely Graph: Fetch and Display new data

Where can I find the code?

In case you want to dive into the code it can be found here - https://github.com/kunalshetye/og-wordpress

Conclusion

Content Sources in Optimizely Graph is a very powerful feature allowing you to index data external to the Optimizely CMS and query like natively via the GraphQL endpoint. This also brings in support for things like Semantic Search for the data that you have on an external system

Hope this post was useful, thank you and until next time!