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); }

          

   5. After we grab what content we need, we can then render the payload to the page.

      1. Example of a ReactJS/NextJS component that has a connection to Contentful

      2.