// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-contentstack`,
    options: {
      // Required: API Key is a unique key assigned to each stack.
      api_key: `api_key`,

      // Required: Delivery Token is a read-only credential.
      delivery_token: `delivery_token`,

      // Required: Environment where you published your data.
      environment: `environment`,

      // Optional: Specify branch name. Default it would fetch from "main".
      branch: `branch name`,

      // Optional: CDN set this to point to other cdn end point. For eg: https://eu-cdn.contentstack.com/v3
      cdn: `cdn_url`,

      // Recommended: Specify true if you want to fetch/source data parallelly. It enhances the performance on both gatsby build/develop command.
      expediteBuild: `boolean_value`,

      // Recommended: Specify true if you want to generate custom schema when the content type models are complex.
      enableSchemaGeneration : `boolean_value`,

      // Optional: Specify true if you want to generate optional graphql fields for mandatory Contentstack fields
      disableMandatoryFields : `boolean_value`,

      // Optional: Specify a different prefix for types. This is useful in cases where you have multiple instances of the plugin to be connected to different stacks.
      type_prefix: `Contentstack`, // (default)

      // Optional: Specify true if you want to download all your contentstack images locally
      downloadImages: `boolean_value`,

      // Optional: Specify the content types from which you want the plugin to retrieve data.
      contentTypes: [‘blog’,’author’],
      // This will fetch the data of the ‘blog’ and ‘author’ content types only.

      // Optional: Specify the content types that the plugin should exclude while fetching data of all content types.
      excludeContentTypes: [‘home’,’about’],
      // This will fetch the data of all the available content types excluding the ‘home’ and ‘about’ content types.

      // Optional: Include the locales that you want the plugin to fetch data from.
      locales: [‘en-us’,’fr-fr’],
      // In this case, the plugin will fetch only English (United States) and French (France) language data.

      // Optional: Specify true to convert the JSON-RTE repsonse to HTML. Default it is set to false
      jsonRteToHtml: false ,

      // Optional: Specify a number to perform http-retries for network failures. By default it is set to 3.
      httpRetries: 2,

      //Optional: Specify the number of entries/assets to be fetched per page. Maximum limit accepted is 100. By default it is set to 50.
      limit: 50

      //Optional: Specify the header to be passed to Contentstack API
      enableEarlyAccessKey: 'x-header-ea'

      //Optional: Specify list of headers to be passed to Contentstack API for the key specified in enableEarlyAccessKey. The Value should be a string. In case of multiple headers, separate them with a comma. For eg:'header1,header2'
      enableEarlyAccessValue: 'newcda,taxonomy'

    },
  },
]
// Note: access_token is replaced by delivery_token

{
  allContentstackBlogs {
    edges {
      node {
        id
        title
        url
        description
        banner {
          filename
          localAsset {
            base
            absolutePath
            publicURL
            url
            childImageSharp {
              fixed(width: 125, height: 125) {
                base64
              }
            }
          }
        }
        created_at
      }
    }
  }
}

{
  allContentstackBlogs {
    edges {
      node {
        id
        title
        url
        description
        authors {
          name
        }
        created_at
      }
    }
  }
}

fragment Author on contentstack_author {
  name
}

query {
  allContentstackBlogs {
    node {
      authors {
        ...Author
      }
    }
  }
  allContentstackArticles {
    node {
      authors {
        ...Author
      }
    }
  }
}

{
  allContentstackAssets {
    edges {
      node {
        id
        title
        localAsset {
          childImageSharp {
            fluid {
              base64
              aspectRatio
              src
              srcSet
              sizes
            }
          }
        }
      }
    }
  }
}

{
  allContentstackBlog {
    edges {
      node {
        title
        image {
          gatsbyImageData(
            layout: CONSTRAINED
            crop: "100,100"
            trim: "25,25,100,100"
            backgroundColor: "cccccc"
            pad: "25,25,25,25"
          )
        }
      }
    }
  }
}

{
  allContentstackBlog {
    edges {
      node {
        title
        image {
          gatsbyImageData(
            layout: CONSTRAINED
            placeholder: BLURRED
            crop: "100,100"
            trim: "25,25,100,100"
            backgroundColor: "cccccc"
            pad: "25,25,25,25"
          )
        }
      }
    }
  }
}

import { ContentstackGatsby } from 'gatsby-source-contentstack/live-preview';
import ContentstackLivePreview from '@contentstack/live-preview-utils';

export const getCSData = new ContentstackGatsby({
  api_key: GATSBY_CONTENTSTACK_API_KEY,
  environment: GATSBY_CONTENTSTACK_ENVIRONMENT,
  live_preview: {
    management_token: GATSBY_CONTENTSTACK_MANAGEMENT_TOKEN,
    enable: true,
    host: 'api.contentstack.io', // "eu-api.contentstack.com" for EU region
  },
});

ContentstackLivePreview.init({
  stackSdk: getCSData.stackSdk,
});

const Home = props => {
  const [data, setData] = useState(props.data.allContentstackPage.nodes[0]);

  const fetchLivePreviewData = async () => {
    const updatedData = await getCSData.get(
      props.data.allContentstackPage.nodes[0]
    );
    setData(updatedData);
  };

  useEffect(() => {
    ContentstackLivePreview.onLiveEdit(fetchLivePreviewData);
  }, []);

  return <div>{data.title}</div>;
};