How to use the datocms-client.SiteClient function in datocms-client

window.DatoCmsPlugin.init((plugin) => {
  plugin.startAutoResizer();
  const dato = new SiteClient(plugin.parameters.global.datoCmsApiToken);

  const container = document.createElement('div');
  container.classList.add('container');
  document.body.appendChild(container);
  const title = document.createElement('h4');
  title.classList.add('title');
  title.textContent = plugin.parameters.instance.title;
  container.appendChild(title);

  const postItemType = Object.values(plugin.itemTypes).find(
    itemType => itemType.attributes.api_key === plugin.parameters.instance.itemTypeApiKey,
  );

  const linkField = Object.values(plugin.fields).find(field => (
    field.relationships.item_type.data.id === postItemType.id
      && field.attributes.api_key === plugin.parameters.instance.fieldApiKey

async fetchContent (store) {
    const { addCollection, getCollection } = store
    const { apiToken, apiUrl, previewMode } = this.options

    const clientHeaders = {
      'X-Reason': 'dump',
      'X-SSG': 'gridsome'
    }

    const client = apiUrl
      ? new SiteClient(apiToken, clientHeaders, apiUrl)
      : new SiteClient(apiToken, clientHeaders)

    const loader = new Loader(client, previewMode)
    await loader.load()

    const { itemsRepo, entitiesRepo } = loader

    const cache = {}

    for (const itemType of itemsRepo.itemTypes) {
      const { titleField, fields } = itemType

      const slugField = fields.find(({ fieldType }) => fieldType === 'slug')

      cache[itemType.id] = { titleField, slugField }

      const collection = addCollection(

async fetchContent (store) {
    const { addCollection, getCollection } = store
    const { apiToken, apiUrl, previewMode } = this.options

    const clientHeaders = {
      'X-Reason': 'dump',
      'X-SSG': 'gridsome'
    }

    const client = apiUrl
      ? new SiteClient(apiToken, clientHeaders, apiUrl)
      : new SiteClient(apiToken, clientHeaders)

    const loader = new Loader(client, previewMode)
    await loader.load()

    const { itemsRepo, entitiesRepo } = loader

    const cache = {}

    for (const itemType of itemsRepo.itemTypes) {
      const { titleField, fields } = itemType

      const slugField = fields.find(({ fieldType }) => fieldType === 'slug')

      cache[itemType.id] = { titleField, slugField }

module.exports = async (
  { actions, getNode, getNodesByType, reporter, parentSpan, schema, store },
  {
    apiToken,
    disableLiveReload,
    previewMode,
    apiUrl,
    localeFallbacks: rawLocaleFallbacks,
  },
) => {
  let client = apiUrl
    ? new SiteClient(apiToken, CLIENT_HEADERS, apiUrl)
    : new SiteClient(apiToken, CLIENT_HEADERS);

  const localeFallbacks = rawLocaleFallbacks || {};

  const loader = new Loader(client, process.env.GATSBY_CLOUD || previewMode);

  const program = store.getState().program;
  const cacheDir = `${program.directory}/.cache/datocms-assets`;

  if (!fs.existsSync(cacheDir)) {
    fs.mkdirSync(cacheDir);
  }

  const context = {
    entitiesRepo: loader.entitiesRepo,
    actions,
    getNode,

constructor(opts) {
    Object.assign(this, this.validate(opts))
    this.client = new SiteClient(opts.token, { 'X-Api-Version': '1' })
    bindAllClass(this, ['apply', 'run'])
  }

module.exports = async (
  { actions, getNode, getNodesByType, reporter, parentSpan, schema, store },
  {
    apiToken,
    disableLiveReload,
    previewMode,
    apiUrl,
    localeFallbacks: rawLocaleFallbacks,
  },
) => {
  let client = apiUrl
    ? new SiteClient(apiToken, CLIENT_HEADERS, apiUrl)
    : new SiteClient(apiToken, CLIENT_HEADERS);

  const localeFallbacks = rawLocaleFallbacks || {};

  const loader = new Loader(client, process.env.GATSBY_CLOUD || previewMode);

  const program = store.getState().program;
  const cacheDir = `${program.directory}/.cache/datocms-assets`;

  if (!fs.existsSync(cacheDir)) {
    fs.mkdirSync(cacheDir);
  }

  const context = {
    entitiesRepo: loader.entitiesRepo,
    actions,