How to use contentful - 10 common examples

key: string;
  spaceId: string;
  preview?: boolean;
  entryTitle?: IEntryTitle;
  style?: IStyles;
}) {
  if (!isBrowser()) {
    return {
      // tslint:disable-next-line no-empty
      update: () => {},
      // tslint:disable-next-line no-empty
      destroy: () => {}
    };
  }

  clients[spaceId] = createClient({
    // This is the space ID. A space is like a project folder in Contentful terms
    space: spaceId,
    // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
    accessToken: key,
    // no additional requests
    resolveLinks: false,
    host: preview ? "preview.contentful.com" : undefined
  });

  const mergedStyle = mergeStyle(style);

  setStyle({ spaceId, style: mergedStyle });

  let cleanup: Function | null = attachHandlers({
    spaceId,
    entryTitle,

function getContentfulClient (accessToken, spaceId, host) {
  if (!clients[spaceId]) {
    clients[spaceId] = contentful.createClient({
      space: spaceId,
      accessToken,
      host
    })
  }

  return clients[spaceId]
}

_createClient() {
    this.cdaClient = createClient({
      space: this.config.space,
      accessToken: this.config.accessToken
    });
  }
}

constructor (api, options) {
    this.options = options
    this.typesIndex = {}

    this.client = contentful.createClient({
      accessToken: options.accessToken,
      environment: options.environment,
      space: options.space,
      host: options.host
    })

    api.loadSource(async store => {
      await this.getContentTypes(store)
      await this.getAssets(store)
      await this.getEntries(store)
    })
  }

const contentful = require('contentful');
const manifestConfig = require('./manifest-config');
require('dotenv').config();

const { ACCESS_TOKEN, SPACE_ID, ANALYTICS_ID, DETERMINISTIC } = process.env;

const client = contentful.createClient({
  space: SPACE_ID,
  accessToken: ACCESS_TOKEN,
});

const getAboutEntry = entry => entry.sys.contentType.sys.id === 'about';

const plugins = [
  'gatsby-plugin-react-helmet',
  {
    resolve: 'gatsby-plugin-web-font-loader',
    options: {
      google: {
        families: ['Cabin', 'Open Sans'],
      },
    },
  },

const { createClient } = require('contentful')

const contentClient = createClient({
  space: `${process.env.CONTENTFUL_SPACE_ID}`,
  accessToken: `${process.env.CONTENTFUL_TOKEN}`,
  host: process.env.CONTENTFUL_API_BASE_URL || null
})

module.exports = contentClient

import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import { generateBG } from '../utils/bgAnim.js';
import {Helmet} from "react-helmet";
import Markdown from 'markdown-to-jsx';

import * as contentful from 'contentful';

var client = contentful.createClient({
    space: process.env.REACT_APP_BLOG_SPACE,
    accessToken: process.env.REACT_APP_BLOG_ACCESS
})


export default class ProjectScreen extends Component {
    constructor(props){
        super(props)

        this.state = {
            project: [],
            notFound: false,
            gridSizeX: 0,
            gridSizeY: 0
        }

export function getTagsAndCategories() {
  const client = createClient({
    space: SPACE_ID,
    accessToken: ACCESS_TOKEN,
  });

  return client.getEntries({
    content_type: 'post',
    select: 'fields.category,fields.tags',
  });
}

export type SavedData = {
  entries: CmsEntry[],
  assets: Asset[],
  syncToken: string,
  updated: boolean
};

type SyncOpts = {
  initial: boolean,
  nextSyncToken?: string
};
type Client = {
  sync: SyncOpts => Promise
};

const client: Client = createClient({
  space: Config.CONTENTFUL_SPACE_ID,
  accessToken: Config.CONTENTFUL_API_KEY
});

export const getCmsData = async (
  loadCmsDataFn: typeof loadCmsData = loadCmsData,
  updateCmsDataFn: typeof updateCmsData = updateCmsData
): Promise => {
  const localCmsData = await loadCmsDataFn();
  const hasLocalCmsData = !!localCmsData;

  if (hasLocalCmsData) {
    return { ...localCmsData, updated: false };
  }

  return updateCmsDataFn();

};
type SyncOpts = {
  initial: boolean,
  nextSyncToken?: string
};
type Client = {
  sync: SyncOpts => Promise
};

type UpdateEvents = () => Promise;
type GetEvents = (
  loadEvents?: loadEvents,
  updateEvents?: updateEvents
) => Promise;

const client: Client = createClient({
  space: Config.CONTENTFUL_SPACE_ID,
  accessToken: Config.CONTENTFUL_API_KEY
});

export const getEvents: GetEvents = async (
  loadEventsFn = loadEvents,
  updateEventsFn = updateEvents
) => {
  const localEventsData = await loadEventsFn();
  const hasLocalEventsData =
    !!localEventsData && localEventsData.events.length > 0;

  if (hasLocalEventsData) {
    return localEventsData.events;
  }