1$ yarn add gatsby-source-cosmicjs

 1[label Module: gatsby-config.js]
 2{
 3  resolve: "gatsby-source-cosmicjs",
 4  options: {
 5    bucketSlug: process.env.COSMIC_BUCKET,
 6    // We add the 'team-members' object type to be able to fetch it later
 7    objectTypes: ["team-members"],
 8    // If you have enabled read_key to fetch data (optional).
 9    apiAccess: {
10      read_key: process.env.COSMIC_ENV_KEY,
11    }
12  }
13}

 1graphql(`
 2  {
 3    allCosmicjsTeamMembers  {
 4      edges {
 5      # Here we have the structure of out `team-members` object
 6        node {
 7          title
 8          locale
 9          content
10          metadata {
11            profile_picture {
12              imgix_url
13            }
14          }
15        }
16      }
17    }
18  }
19`)

 1[label Module: gatsby-node.js]
 2// langs contains the languages of our blog and default langKey is the default language of the site
 3// To be fully programmatic we could calculate langs
 4// here langs = ['en', 'ja'] and defaultLangKey = 'en'
 5const { langs, defaultLangKey } = require('../config/languages')
 6const path = require(`path`)
 7const { localizeUrl, createLanguagesObject } = require('../utils/localization')
 8
 9exports.createPages = async ({ actions, graphql }) => {
10  const { createPage } = actions
11
12  const result = await graphql(`
13    {
14      allCosmicjsTeamMembers  {
15        edges {
16          node {
17            title
18            locale
19            content
20            metadata {
21              profile_picture {
22                imgix_url
23              }
24            }
25          }
26        }
27      }
28    }
29  `)
30
31  if (result.errors) {
32    console.error(result.errors)
33  }
34
35  // Creates a profiles object with out site's languages 
36  const profiles = createLanguagesObject(langs)
37  // profiles = {
38  // 'en': [],
39  // 'ja': []  
40  // }
41
42  // converting the raw cosmic data into a more useable data structure
43  result.data.allCosmicjsTeamMembers.edges.forEach(({ node }) => {
44    profiles[node.locale].push(node)
45  })
46  // profiles = {
47  // 'en': [...all English profiles],
48  // 'ja': [...all Japanese profiles]  
49  // }
50
51  // we create a new page for each language
52  langs.forEach(lang =>{
53     createPage({
54      // the localizeUrl function creates a url which takes into consideration what the default language is
55      path: localizeUrl(lang, defaultLangKey, '/team'),
56      component: path.resolve(`src/templates/team.js`),
57      context: {
58        profiles: profiles[lang]
59      }
60    })
61  })
62}

 1import React from "react"
 2import Layout from "../components/layout"
 3import SEO from "../components/seo"
 4
 5const TeamPage = (props) => {
 6  // We will see about pageContext in the next section
 7  const {profiles} = props.pageContext
 8  return (
 9  <Layout location={props.location}>
10    <SEO title="Team" />
11    <h1>Team</h1>
12    // Iterating trough the array of profiles
13    {profiles.map((profile,i)=>(
14      <div key={i} className="columns">
15        <div className="column">
16          // Here are some nice profile pictures of our team members
17          <div className="square-image" style={{backgroundImage: `url("${profile.metadata.profile_picture.imgix_url}")`}}/>
18        </div>
19        <div className="column is-two-thirds">
20          <div className="team-member-title">{profile.title}</div>
21          // Here is some html content we get from Cosmic
22          <div dangerouslySetInnerHTML={{ __html: profile.content }}/>
23        </div>
24      </div>
25      )
26    )}
27  </Layout>
28  )
29}
30
31export default TeamPage