Render Storyblok Stories Dynamically in Gatsby.js

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    Hint:

    Please note that this article has already been updated to match Storyblok V2. If you haven’t already started using it, you can find out how to make the switch here.

    In this short tutorial, we will see how to start making a real website with Gatsby.js and Storyblok. We will add a layout that includes a navigation bar and a footer to our website to make it look better. We will also see how we can add new pages and render them dynamically according to the added components inside them.

    Hint:

    If you’re in a hurry, have a look at our demo in boilerplate repo!

    Requirements

    This is a part of the Ultimate Tutorial Guide for Gastby.js. You can find the previous part of the series here, which shows you how to integrate Storyblok and Gatsby.js in 5 minutes. We recommend you take a look at that tutorial before starting this one.

    HINT:

    We will be using the code from the 5 minutes tutorial as a starting point. You can find it here.

    Changing Styles

    Let’s add TailwindCSS to our project for the ease of adding styles. You can refer to this guide for adding TailwindCSS to Gatsby.js.

    After adding TailwindCSS, let’s add a couple of classes to the Teaser and Grid components.

    The teaser.js file should look something like this -

    components/teaser.js
    ...
    
    return (
      <h2 className="text-2xl mb-10" {...storyblokEditable(blok)}>
        {blok.headline}
      </h2>
    )
    
    ...

    Change the grid.js code to the following -

    components/grid.js
    ...
    
    <div className="grid grid-cols-3" {...storyblokEditable(blok)}>
      {blok.columns.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </div>
    
    ...

    Change the layout.js code to the following -

    components/layout.js
    ...
    
      return (
        <div className="text-center">
          <main>{children}</main>
        </div>
      )
    
    ...

    The home story now should look something like this -

    app.storyblok.com
    Home Story

    Home Story

    Adding a Layout

    Let’s add a layout to our website by creating a static navigation bar and a footer. We will look at how to create dynamic navigation bars in an upcoming tutorial of this series.

    Make two files in your components folder, header.js and footer.js

    Add the following code to header.js file -

    components/header.js
    import { useState } from "react";
    import { Link } from "gatsby";
    const Navigation = () => {
      const [openMenu, setOpenMenu] = useState(false);
    
      return (
        <div className="relative bg-white border-b-2 border-gray-100">
          <div className="max-w-7xl mx-auto px-4 sm:px-6">
            <div className="flex justify-between items-center  py-6 md:justify-start md:space-x-10">
              <div className="flex justify-start lg:w-0 lg:flex-1">
                <Link to="/">
                  <a>
                    <span className="sr-only">Storyblok</span>
                    <img
                      className="h-20 w-auto sm:h-10 hidden sm:block"
                      src='https://a.storyblok.com/f/88751/251x53/0d3909fe96/storyblok-primary.png'
                      alt="Storyblok"
                    />
                    <img
                      className="h-20 w-auto sm:h-10 sm:hidden"
                      src='https://a.storyblok.com/f/88751/92x106/835caf912a/storyblok-logo.png'
                      alt="Storyblok"
                    />
                  </a>
                </Link>
              </div>
              <div className="-mr-2 -my-2 md:hidden">
                <button
                  type="button"
                  onClick={() => setOpenMenu(true)}
                  className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                  aria-expanded="false"
                >
                  <span className="sr-only">Open menu</span>
                  {/* <!-- Heroicon name: outline/menu --> */}
                  <svg
                    className="h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                </button>
              </div>
              <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0 space-x-10">
                <Link to="/about">
                  <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                    
                    About
                  </a>
                </Link>
                <Link to="/blog">
                  <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                    
                    Blog
                  </a>
                </Link>
                <Link to="/services">
                  <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                    
                    Services
                  </a>
                </Link>
              </div>
            </div>
          </div>
    
          {/* <!--
            Mobile menu, show/hide based on mobile menu state.
          --> */}
          {openMenu && (
            <div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
              <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
                <div className="pt-5 pb-6 px-5">
                  <div className="flex items-center justify-between">
                    <div>
                      <img
                        className="h-8 w-auto"
                        src="https://a.storyblok.com/f/88751/92x106/835caf912a/storyblok-logo.png"
                        alt="Storyblok"
                      />
                    </div>
                    <div className="-mr-2">
                      <button
                        type="button"
                        onClick={() => setOpenMenu(false)}
                        className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                      >
                        <span className="sr-only">Close menu</span>
                        {/* <!-- Heroicon name: outline/x --> */}
                        <svg
                          className="h-6 w-6"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M6 18L18 6M6 6l12 12"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div className="mt-6">
                    <nav className="grid gap-y-8">
                      <Link to="/about">
                        <a className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                          {/* <!-- Heroicon name: outline/chart-bar --> */}
                          <span className="ml-3 text-base font-medium text-gray-900">
                            
                            About
                          </span>
                        </a>
                      </Link>
                      <Link to="/blog">
                        <a className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                          {/* <!-- Heroicon name: outline/cursor-click --> */}
                          <span className="ml-3 text-base font-medium text-gray-900">
                            
                            Blog
                          </span>
                        </a>
                      </Link>
                      <Link to="/services">
                        <a className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50">
                          <span className="ml-3 text-base font-medium text-gray-900">
                            
                            Services
                          </span>
                        </a>
                      </Link>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      );
    };
    
    export default Navigation;
    

    Hint:

    Make sure to replace the logos on lines 16 and 21 for desktop and mobile respectively. You can choose any images you like. You will also need to add an image for the mobile navigation bar in line 87.

    Similarly, add the following code to your footer.js file -

    components/footer.js
    const Footer = () => (
    <footer className="bg-white lg:absolute lg:bottom-0 block w-full" aria-labelledby="footer-heading">
      <h2 id="footer-heading" className="sr-only">Footer</h2>
      <div className=" py-12 mx-auto max-w-7xl lg:py-16 px-12 lg:px-20">
        <div className="grid md:grid-cols-4 md:gap-8 grid-cols-2">
          <div className="mt-12 md:mt-0">
            <h3 className="text-xs font-semibold tracking-wider text-blue-600 uppercase">Support</h3>
            <ul role="list" className="mt-4 space-y-4">
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Pricing </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Documentation </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Guides </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> API Status </a>
              </li>
            </ul>
          </div>
          <div className="mt-12 md:mt-0">
            <h3 className="text-xs font-semibold tracking-wider text-blue-600 uppercase">Support</h3>
            <ul role="list" className="mt-4 space-y-4">
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Pricing </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Documentation </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Guides </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> API Status </a>
              </li>
            </ul>
          </div>
          <div className="mt-12 md:mt-0">
            <h3 className="text-xs font-semibold tracking-wider text-blue-600 uppercase">Support</h3>
            <ul role="list" className="mt-4 space-y-4">
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Pricing </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Documentation </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Guides </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> API Status </a>
              </li>
            </ul>
          </div>
          <div className="mt-12 md:mt-0">
            <h3 className="text-xs font-semibold tracking-wider text-blue-600 uppercase">Support</h3>
            <ul role="list" className="mt-4 space-y-4">
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Pricing </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Documentation </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> Guides </a>
              </li>
              <li>
                <a href="#" className="text-sm font-normal text-gray-500 hover:text-gray-900"> API Status </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div className="px-5 py-12 mx-auto bg-gray-50  sm:px-6 md:flex md:items-center md:justify-between lg:px-20">
        <div className="flex justify-center mb-8 space-x-6 md:order-last md:mb-0">
          <a href="#" className="text-gray-400 hover:text-gray-500">
            <span className="sr-only">Facebook</span>
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd"></path>
            </svg>
          </a>
          <a href="#" className="text-gray-400 hover:text-gray-500">
            <span className="sr-only">Instagram</span>
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd"></path>
            </svg>
          </a>
          <a href="#" className="text-gray-400 hover:text-gray-500">
            <span className="sr-only">Twitter</span>
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
            </svg>
          </a>
          <a href="#" className="text-gray-400 hover:text-gray-500">
            <span className="sr-only">GitHub</span>
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path>
            </svg>
          </a>
          <a href="#" className="text-gray-400 hover:text-gray-500">
            <span className="sr-only">Dribbble</span>
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fillRule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clipRule="evenodd"></path>
            </svg>
          </a>
        </div>
        <div className="mt-8 md:mt-0 md:order-1">
          <span className="mt-2 text-sm font-light text-gray-500">
             Copyright © 2017-2022 
            <a href="#" className="mx-2 text-wickedblue hover:text-gray-500" rel="noopener noreferrer">Storyblok GmbH</a>.
          </span>
        </div>
      </div>
    </footer>
    
    )
    
    export default Footer

    Now we need to add a layout file in the components folder, which will use the two newly created components. Add the following code to the layout.js file -

    components/layout.js
    import Navigation from "./Navigation"
    import Footer from "./Footer"
    
    storyblokInit({
      // ...
    })
    
    const Layout = ({ children }) => (
      <div className="text-center">
        <Navigation/>
        {children}
        <Footer />
      </div>
    )
    
    export default Layout

    Now, we need to add this layout to our index.js and {storyblokEntry.full_slug}.js files.

    Replace the index.js file code with the following -

    index.js
    import * as React from "react"
    import { graphql } from "gatsby"
    
    import { StoryblokComponent, storyblokEditable, useStoryblokState } from "gatsby-source-storyblok"
    
    import Layout from "../components/layout"
    
    export default function Home({ data }) {
      let story = data.storyblokEntry
      story = useStoryblokState(story)
    
      const components = story.content.body.map(blok => (<StoryblokComponent blok={blok} key={blok._uid} />))
    
      return (
        <Layout>
          <div {...storyblokEditable(story.content)}>
            {components}
          </div>
        </Layout>
      )
    }
    
    export const query = graphql`
      query HomeQuery {
        storyblokEntry(full_slug: { eq: "home" }) {
          content
          name
          full_slug
          uuid
          id
          internalId
        }
      }
    `

    Similarly, replace the code in the {storyblokEntry.full_slug}.js file with the following code -

    {storyblokEntry.full_slug}.js
    import * as React from "react"
    import { graphql } from "gatsby"
    
    import { StoryblokComponent, storyblokEditable, useStoryblokState } from "gatsby-source-storyblok"
    
    import Layout from "../components/layout"
    
    export default function Page({ data }) {
      let story = data.storyblokEntry
      story = useStoryblokState(story)
    
      const components = story.content.body.map(blok => (<StoryblokComponent blok={blok} key={blok._uid} />))
    
      return (
        <Layout>
          <div {...storyblokEditable(story.content)}>
            {components}
          </div>
        </Layout>
      )
    }
    
    export const query = graphql`
      query ($full_slug: String!) {
        storyblokEntry(full_slug: { eq: $full_slug }) {
          content
          name
          full_slug
          uuid
          id
          internalId
        }
      }
    `
    Hint:

    The {storyblokEntry.full_slug}.js file is being used to generate all the stories other than ‘home’.

    After saving your code, our home story should look something like this -

    app.storyblok.com
    Home Story with a Layout

    Home Story with a Layout

    Right now, we can see that we have three entries in the navigation menu - About, Blog, and Services. But we don’t have any stories created for them. So, if we try to go on any of those links from our browser, we will get 404 - This page could not be found. Let’s add these stories to our space.

    Adding new stories and dynamically rendering pages

    To create a new story, we need to go to the Content section {1} in our space. Once we are there, we will see a button Create New {2} on the top right corner. Click on the button. We will see two options - one to create a new story and another one to create a new folder. Let’s click on Story {3}

    app.storyblok.com
    Create Button
    1
    2
    3

    Create Button

    Once we click on it, we will get a popup with a couple of fields to create a new story. Let’s create an about page. Fill the Name {1} and Slug {2} fields as in the image below -

    app.storyblok.com
    Create Story
    1
    2

    Create Story

    Once we hit Create we will get a new story added. We might see again a 404 error here, but this is because we are only fetching the published links and generating their pages. Once we hit the Publish button, we will have a page with just our layout.

    HINT:

    If you still see your About page is not being rendered, hit the Refresh Data button from GraphiQL. If you haven’t yet enabled the Refresh Data button on the GraphiQL, you can take a look at this tutorial.

    app.storyblok.com
    About Page

    About Page

    We can similarly create the Blog and the Services page as well. These stories are getting generated by the {storyblokEntry.full_slug}.js file, which is catching all the routes. Now, let’s also see how we can add the existing components to any of the pages.

    On the right-hand side of the about story, we can see the empty body with a plus button that will allow us to add existing components to the page. If we click on it, we will see the following -

    app.storyblok.com
    Add Components

    Add Components

    We have a list of existing components, and we can choose any of them. Let’s add the Teaser component, and fill in the Name field for that. As soon as we start filling the content in, we see the changes on the visual editor as well.

    Once we hover on the right-hand side, we should see a similar plus button below the Teaser. Let’s add a Grid component along with three Features as columns, similar to what we have on the home story. We should see something like this now -

    app.storyblok.com
    Grid Addition

    Grid Addition

    In a similar way, we can add any other components and they will be rendered automatically. We could add another Grid and it should look something like this -

    app.storyblok.com
    Dynamic Rendering

    Dynamic Rendering

    We can even add more components anywhere we like in the About story, if we have those created. Now, we could also add the components of choice to the two other stories, Blog and Services, as well.

    Wrapping Up

    In this tutorial, we saw how to start creating a real website after we set up a project using Storyblok and Gatsby.js. Additionally, we learned how to create new stories and pages along with the dynamic rendering of the components wherever we place them.

    Next Part:

    You can find the next tutorial of this series to create a dynamic navigation bar and footer.

    After that tutorial, we will see how to create components with more fields and types from scratch along with extending the behaviour of the existing ones. You can find the tutorial here.

    Developer Newsletter

    Want to stay on top of the latest news and updates in Storyblok?
    Subscribe to Code & Bloks - our headless newsletter.

    An error occurred. Please get in touch with marketing@storyblok.com

    Please select at least one option.

    Please enter a valid email address.

    This email address is already registered.

    Please Check Your Email!

    Almost there! To confirm your subscription, please click on the link in the email we’ve just sent you. If you didn’t receive the email check your ’junk folder’ or