Contentful Project Configuration

Configuration Steps

1. Retrieve Contentful API keys from the UI.

   1. CONTENTFUL_SPACE_ID="YOUR_SPACE_ID"
      CONTENTFUL_ACCESS_TOKEN="YOUR_CONTENTFUL_CONTENT_DELIVERY_API_KEY"

   2. Implement the API Keys in project.

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

      1. 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());
         }

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

      1. //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);
         }