Contentful Render - Component

contentful-render.js

import React from 'react';

const ContentfulRender = ({ children }) => {
  return <>{process.env.GATSBY_CONTENTFUL_KEY ? <>{children}</> : null}</>;
};

export default ContentfulRender;

Usage

import React from 'react';

import ContentfulRender from '../components/contentful-render';

const IndexPage = () => {
  return (
    <main>
      <h1>Index Page</h1>
      <ContentfulRender>
        <SomeContentfulComponent />
      </ContentfulRender>
    </main>
  );
};

export default IndexPage;

This was what i was thinking but i think the problems might come if <SomeContentfulComponent /> has a GraphQL query inside of it that relies on Contentful data. Reason being is that if you're using a Gatsby plugin to source the data from Contentful then the API key needs to be there or you'll get an error when Gatsby builds

The other option i was thinking about would be to create multiple Contentful spaces which have their own keys. Folks who shouldn't see certain content would get a key to a dummy or blank workspace. This way the site sill works as expected it just returns no data. You might need to add a few data ? <div /> : null in places where the UI is expecting an array and it might be null when the blank key is used.