How to implement Mailchimp into Gatsby SiteGatsby

We are recently developed a site into the gatsby. basically contact us feature is common in all website. and we are implementing Mailchimp because it's a very popular platform in email market. So, I will show you how to setup a Mailchimp in the Gatsby site. ## Using gatsby-source-mailchimp Use your Mailchimp API key to download your campaigns into Gatsby’s GraphQL data layer! Install the package by running the following command: `npm i gatsby-source-mailchimp --save` ### How to configure Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so: Configure mailchimp Key and add this {resolve: `gatsby-source-mailchimp`} into the plugins array. code looks like
``` module.exports = { // ... plugins: [ { resolve: 'gatsby-source-mailchimp', options: { // Avoid including your key directly in your file. // Instead, opt for adding them to .env files for extra // security ;) key: 'asd712jdas90122jdas90122jkadsd1-usXX', rootURL: 'https://usXX.api.mailchimp.com/3.0', }, }, ], // ... } ```
Above is the minimal configuration required to have it work. By default, This plugin was made out of a specific necessity, so it doesn't cover all of Mailchimp’s data sources, focusing only on campaigns. this plugin are provide few options. you can refer here. ## Using `.env` variables to hide your key If you don’t want to attach your API key to the repo, you can easily store it in .env files by doing the following:
``` // In your .env file MAILCHIMP_KEY = 'asd712jdas90122jdas90122jkadsd1-usXX'; ``` ``` // In your gatsby-config.js file require('dotenv').config({ path: `.env.${process.env.NODE_ENV}`, }); module.exports = { // ... plugins: [ { resolve: 'gatsby-source-mailchimp', options: { key: process.env.MAILCHIMP_KEY, rootURL: 'https://usXX.api.mailchimp.com/3.0', // ... }, }, ], // ... }; ```