I am retrieving data from a REST API using axios and I need to send the data to the page so it can be written on the html.

In gatsby-node.js I have:

const axios = require('axios')

const get = axios.get('https://cv-page.prismic.io/api/v1/documents/search?ref=YDNpXBUAAMmV9aOD#format=json');

async function getPrismicData(){
  const data = await get;
  return getExperiences(data.data)
}
    

function getExperiences(data) {
    var object = [{
      experienceTitle: data.results[0].data.cv.experiences.value[0]["experience-title"].value[0].text,
      dateEnd: data.results[0].data.cv.experiences.value[0]["date-end"].value,
      dateStart: data.results[0].data.cv.experiences.value[0]["date-start"].value
    },
    {
      experienceTitle: data.results[0].data.cv.experiences.value[1]["experience-title"].value[0].text,
      dateEnd: data.results[0].data.cv.experiences.value[1]["date-end"].value,
      dateStart: data.results[0].data.cv.experiences.value[1]["date-start"].value
    }
  ]
  return object;
}

exports.createPages = async ({actions: {createPage}}) => {
  const prismicData = await getPrismicData();
  console.log(prismicData)

  createPage({
      path: `/`,
      component: require.resolve("./src/pages/index.js"),
      context: {prismicData}
  });

}

Meanwhile, in index.js I have:

import React from "react"

import LeftColumn from "../components/left_column"
import RightColumn from "../components/right_column"
import "./index.css"

export default ({ pageContext: { prismicData } }) => {
  console.log(prismicData)
  return(
    <div className="two-columns">
    <LeftColumn></LeftColumn>
    <RightColumn></RightColumn>
    </div>
  )
}

What I can see in the console.logs is that in gatsby-node I have retrieved the data correctly while in index.js it’s undefined.

What I am doing wrong? I can’t understand the problem.

Source: Ask Javascript Questions