Agility CMS Sync SDK

The Agility CMS Sync SDK provides an interface to sync, store and access content locally.

By keeping a local cache of your content, your web app can access content faster.

Benefits

• Access your content quickly, and locally in your web or mobile app
• Use your own persistent storage, such as Gatsby GraphQL, a Database, or Local Storage
• Simplify syncing content

Use Cases

1. You want to reduce the amount of REST API calls made to your Agility CMS instance.
2. You have a client-side Single Page Application, and want to cache content in local storage in the browser.
3. You want so synchronize content from the CMS to another system such Redis Cache
4. You are running a Server-Side Rendered (SSR) web app and you want to cache your content locally, reducing latency for retrieving content.
5. You are using a Static Site Generator (SSG) and you don't want to have to re-source all of your content on each build.
6. You have a client-side Single Page Application, and want to cache content in local storage in the browser.

How it Works

This Sync SDK uses the Sync API getSyncPages and getSyncContent found in our Agility CMS Content Fetch JS SDK and aims to abstract some of the complexities involved in managing synced content.

It Calls the Sync API and returns content that has not yet been synced. The first call will pull everything and save it to your local store. Subsequent calls will only refresh content that has changed since the last time the Sync API was called.

This SDK:

• Calls the API
• Manages your syncToken for you
• Stores content in the filesystem (by default)
• Provides ability to extend and store/access content in other places

Setup

Install @agility/content-sync:

npm install @agility/content-sync

Import Patterns

1// Default import
2import getSyncClient from '@agility/content-sync';
3const syncClient = getSyncClient({...});
4
5// Named import  
6import { getSyncClient } from '@agility/content-sync';
7const syncClient = getSyncClient({...});
8
9// CommonJS
10const getSyncClient = require('@agility/content-sync');
11const syncClient = getSyncClient({...});

Note: If upgrading and encountering Cannot read properties of undefined (reading 'getSyncClient'), use require('@agility/content-sync').default.getSyncClient for compatibility with transpiled code.

Sync to Filesystem (using Defaults)

1. Create a sync client:

   1import agilitySync from '@agility/content-sync'
   2const syncClient = agilitySync.getSyncClient({
   3    //your 'guid' from Agility CMS
   4    guid: 'some-guid',
   5    //your 'apiKey' from Agility CMS
   6    apiKey: 'some-api-key',
   7    //the language(s) of content you want to source
   8    languages: ['en-us'],
   9    //your channel(s) for the pages you want to source
   10	channels: ['website'],
   11	//whether you are using the preview key or not
   12	isPreview: false
   13});

2. Run the runSync command to synchronize your Agility CMS content (Content and Pages) to your local filesystem

   1await syncClient.runSync();

   runSync() will pull down all your Sitemap, Pages, and Content and store them in your local filesystem under the default path .agility-files.

Accessing Content

Once content is in your sync store, you can easily access it as you need it:

1import agilitySync from '@agility/content-sync'
2const syncClient = agilitySync.getSyncClient({
3    //your 'guid' from Agility CMS
4    guid: 'some-guid',
5    //your 'apiKey' from Agility CMS
6    apiKey: 'some-api-key',
7    //the language(s) of content you want to source
8    languages: ['en-us'],
9    //your channel(s) for the pages you want to source
10    channels: ['website']
11});
12
13//start the sync process
14await syncClient.runSync();
15
16//query and retrieve your content
17const contentItem = await syncClient.store.getContentItem({
18    contentID: 21,
19    languageCode: languageCode
20})
21
22const contentList = await syncClient.store.getContentList({
23    referenceName: 'posts',
24    languageCode: languageCode
25})

Clearing out the Sync Content

To clear out the locally synced content, run the clearSync command.

1await syncClient.clearSync();

How to Create your Own Sync Store

While this SDK provides a filesystem sync interface by default, you can change this and use another one or create your own.

1. Create a new .js file which exports the following methods:

1/**
2 * The function to handle saving/updating an item to your storage. This could be a Content Item, Page, Url Redirections, Sync State (state), or Sitemap.
3 * @param {Object} params - The parameters object
4 * @param {Object} params.options - A flexible object that can contain any properties specifically related to this interface
5 * @param {Object} params.item - The object representing the Content Item, Page, Url Redirections, Sync State (state), or Sitemap that needs to be saved/updated
6 * @param {String} params.itemType - The type of item being saved/updated, expected values are `item`, `page`, `sitemap`, `nestedsitemap`, `state`, `urlredirections`
7 * @param {String} params.languageCode - The locale code associated to the item being saved/updated
8 * @param {(String|Number)} params.itemID - The ID of the item being saved/updated - this could be a string or number depending on the itemType
9 * @returns {Void}
10 */
11const saveItem = async ({ options, item, itemType, languageCode, itemID }) => {
12    console.log(`Console Interface: saveItem has been called`);
13    return null;
14}
15/**
16 * The function to handle deleting an item to your storage. This could be a Content Item, Page, Url Redirections, Sync State (state), or Sitemap.
17 * @param {Object} params - The parameters object
18 * @param {Object} params.options - A flexible object that can contain any properties specifically related to this interface
19 * @param {String} params.itemType - The type of item being deleted, expected values are `item`, `page`, `sitemap`, `nestedsitemap`, `state`, `urlredirections`
20 * @param {String} params.languageCode - The locale code associated to the item being saved/updated
21 * @param {(String|Number)} params.itemID - The ID of the item being deleted - this could be a string or number depending on the itemType
22 * @returns {Void}
23 */
24const deleteItem = async ({ options, itemType, languageCode, itemID }) => {
25    console.log(`Console Interface: deleteItem has been called`);
26    return null;
27}
28/**
29 * The function to handle updating and placing a Content Item into a "list" so that you can handle querying a collection of items.
30 * @param {Object} params - The parameters object
31 * @param {Object} params.options - A flexible object that can contain any properties specifically related to this interface
32 * @param {Object} params.item - The object representing the Content Item
33 * @param {String} params.languageCode - The locale code associated to the item being saved/updated 
34 * @param {(String|Number)} params.itemID - The ID of the item being updated - this could be a string or number depending on the itemType
35 * @param {String} params.referenceName - The reference name of the Content List that this Content Item should be added to
36 * @param {String} params.definitionName - The Model name that the Content Item is based on
37 * @returns {Void}
38 */
39const mergeItemToList = async ({ options, item, languageCode, itemID, referenceName, definitionName }) => {
40	console.log(`Console Interface: mergeItemToList has been called`);
41    return null;
42}
43/**
44 * The function to handle retrieving a Content Item, Page, Url Redirections, Sync State (state), or Sitemap
45 * @param {Object} params - The parameters object
46 * @param {Object} params.options - A flexible object that can contain any properties specifically related to this interface
47 * @param {String} params.itemType - The type of item being accessed, expected values are `item`, `list`, `page`, `sitemap`, `nestedsitemap`, `state`, `urlredirections`
48 * @param {String} params.languageCode - The locale code associated to the item being accessed
49 * @param {(String|Number)} params.itemID - The ID of the item being accessed - this could be a string or number depending on the itemType
50 * @returns {Object}
51 */
52const getItem = async ({ options, itemType, languageCode, itemID }) => {
53    console.log(`Console Interface: getItem has been called`)
54    return null;
55}
56/**
57 * The function to handle clearing the cache of synchronized data from the CMS
58 * @param {Object} params - The parameters object
59 * @param {Object} params.options - A flexible object that can contain any properties specifically related to this interface
60 * @returns {Void}
61 */
62const clearItems = async ({ options }) => {
63    console.log(`Console Interface: clearItem has been called`)
64    return null;
65}
66
67module.exports = {
68    saveItem,
69    deleteItem,
70    mergeItemToList,
71    getItem,
72    clearItems
73}

2. Register the syncClient to use your Sync Store

1import agilitySync from '@agility/content-sync'
2import sampleSyncConsoleInterface from './store-interface-console'
3const syncClient = agilitySync.getSyncClient({
4    //your 'guid' from Agility CMS
5    guid: 'some-guid',
6    //your 'apiKey' from Agility CMS
7    apiKey: 'some-api-key',
8    //the language(s) of content you want to source
9    languages: ['en-us'],
10    //your channel(s) for the pages you want to source
11    channels: ['website'],
12    //your custom storage/access interface
13    store: {
14        //must be the interface used to store and access content
15        interface: sampleSyncConsoleInterface,
16        //any options/config that you want to pass along to your interface as an argument 'options'
17        options: {}
18    }
19});
20//start the sync process
21syncClient.runSync();