DEV Community

Cover image for Multilingual website with Gatsby and Contentful - Part 1
Louis Bertin
Louis Bertin

Posted on • Edited on

Multilingual website with Gatsby and Contentful - Part 1

#gatsby #javascript #react #jamstack

Prerequisites

  • You have to install NodeJS on your device. After installation, npm -v should work.

Installation

  • It's better to install official Gastby CLI : npm install -g gatsby-cli
  • Project creation : 
gatsby new gatsby-site
cd gatsby-site
Enter fullscreen mode Exit fullscreen mode
  • Finally, use this command line to run your project : gatsby develop , your website should be available at this following URL : http://localhost:8000

Contentful

In this tutorial, I have chosen Contentful, he had the advantage to be free when you want to build a classic website. You can view pricing details on the official website.

  • Next, create an account and create your first content model.
  • For this tutorial, here is the one I choose to build. He's pretty simple 
    {
      "name": "Post",
      "description": "",
      "displayField": "title",
      "fields": [
        {
          "id": "title",
          "name": "Title",
          "type": "Symbol",
          "localized": true,
        },
        {
          "id": "content",
          "name": "Content",
          "type": "RichText",
          "localized": true,
        }
      ],
Enter fullscreen mode Exit fullscreen mode

⚠️I have enabled this localization, this will allow me to deal with different languages in the next post.

  • Next, create a classic post and don't forget to enable the translation by creating a version of your post for each language.

Congratulations! Your post has been created 🎉

Connect Gastby & Contenful

  • First, you have to install the official Contentful plugin : https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=contentful. I give you the command line if you don't want to read the documentation 😉 : npm install --save gatsby-source-contentful
  • Here, you have two choices, you can use the Content Delivery API or the Preview API. After reading the Contentful documentation, the Delivery API is more appropriate.
  • Get your spaceId and your accessToken in the tab Settings > API Keys in Contentful back-end
  • Then, you have to setup the plugin in Gatsby : 
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `YOUR_SPACE_ID`,
        accessToken: `YOUR_ACCESS_TOKEN`,
      },
    },
Enter fullscreen mode Exit fullscreen mode
  • After, try to retrieve your posts! 
 import React from "react"
    import { graphql, Link } from "gatsby"

    import Layout from "../components/layout"
    import SEO from "../components/seo"

    const IndexPage = ({ data }) => (
      <Layout>
        <SEO title="Home" />
        <h1>Hi people</h1>
        <p>Welcome to my new Gatsby Website</p>

        <h2 style={{margin: 0}}>Posts</h2>
        {data.allContentfulPost.nodes.map(post => {
          return (
            <div key={post.id}>{post.title}</div>
          )
        })}
      </Layout>
    )

    export const query = graphql`
      query ContentFulPosts {
        allContentfulPost {
          nodes {
            id
            title
            node_locale
          }
        }
      }
    `
    export default IndexPage
Enter fullscreen mode Exit fullscreen mode

Your posts should be displayed correctly on your index page! 😄
Alt Text

In the next post

In the next post I will explain how to implement multiple languages on a Gatsby website with content provided by Contentful 🙂

By the way, you can find my code on Github!

Top comments (2)

Collapse
 
kishokanth profile image
Kishokanth •

It says Cannot query field "path" on type "ContentfulPost" after I created a contentful model just like yours :/

Collapse
 
louisbertin profile image
Louis Bertin • • Edited

Do you have this message when you want to display your Contentful data in Gatsby ?
I think you can try :

  • sometimes you have to rerun the project : kill the current Gatsby process and rerun gatsby develop
  • did you tried to fetch your data in the GraphQL Playground provided by Gatsby ?