javascript – How to reference graphQL outside of return statement in React.Js? Syntax?

So I’m trying to use contentful as a back end for my website and want to define all my media files. Normally when I plug in contentful I make the query from graphQL and state is using {} notations.

such as:

   {data.allContentfulMyContent.edges[1].node.audioSlump.file.url}

The trouble is, I want to reference that specific API call outside of the return function, and define it in an array and define it as a const.

My data structure looks like this:

const accordionItems = [
   id: "Set1:",
      items: [
        { item: "Name goes here", data: image, audio: music },
     ]
]

ideally, I want to put the query where audio and data are.

I’ve tried:

audio:  {data.allContentfulMyContent.edges[1].node.audioSlump.file.url} 
audio:  data.allContentfulMyContent.edges[1].node.audioSlump.file.url

first one doesn’t compile and then I do the second one I get an error:

 The page didn't server render (SSR) correctly
 Cannot read property 'allContentfulMyContent' of undefined

Can anyone help me make sense of this?

Read more here: Source link