Page Comparison

...

Retrieve Contentful API keys from the UI.

Code Block
CONTENTFUL_SPACE_ID="YOUR_SPACE_ID" CONTENTFUL_ACCESS_TOKEN="YOUR_CONTENTFUL_CONTENT_DELIVERY_API_KEY"

Implement the API Keys in project.

This code sample shows the connection to Contentful’s GraphQL API, and how we can access the our space by providing those API keys.

Code Block

language	js

async function fetchGraphQL(query, preview = false) {
  return fetch(
    `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${
          preview
            ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
            : process.env.CONTENTFUL_ACCESS_TOKEN
        }`,
      },
      body: JSON.stringify({ query }),
    }
  ).then((response) => response.json());
}

Once we have a GraphQL connection to Contentful, we can access various entries by querying that source.

Code Block

//Example GraphQL Query for Post types

export async function getAllPostsForHome(preview) {
  const entries = await fetchGraphQL(
    `query {
      postCollection(order: date_DESC, preview: ${preview ? "true" : "false"}) {
        items {
          ${POST_GRAPHQL_FIELDS}
        }
      }
    }`,
    preview
  );
  return extractPostEntries(entries);
}

Versions Compared

Old Version 2

New Version 3

Key