gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: `GraphCMS`,
        fieldName: `gcms`,
        url: `https://api-eu-central-1.graphcms.com/v2/ckjp80jbpftcp01z10zldgn49/master`
      }
    }
  ]
}

gistfile1.txt

import React from 'react'

import { graphql, useStaticQuery, Link } from 'gatsby'

const postQuery = graphql`
  {
    gcms {
      posts {
        id
        title
        slug
        excerpt
        author {
          name
        }
      }
    }
  }

`

const Indexpost = () => {
  const data = useStaticQuery(postQuery)

  const {
    gcms: {
      posts
    }
  } = data

  console.log('posts', data, posts)

  return (
    <div className="posts">
      {posts.map(({ slug, ...post }) =>
        <div key={slug}>
          <Link to={`/posts/${slug}`}>{post.title}</Link>

          <div>{post.excerpt}</div>
          <div>{post.name}</div>
        </div>
      )}
    </div>
  )
}


export default Indexpost

gistfile2.txt

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: `GraphCMS`,
        fieldName: `gcms`,
        url: `redacated`
      }
    }
  ]
}

index.js

import React from 'react'

import { graphql, useStaticQuery, Link } from 'gatsby'

const postQuery = graphql`
  {
    gcms {
      posts {
        id
        title
        slug
        excerpt
        author {
          name
        }
      }
    }
  }

`

const Indexpost = () => {
  const data = useStaticQuery(postQuery)

  const {
    gcms: {
      posts
    }
  } = data

  console.log('posts', data, posts)

  return (
    <div className="posts">
      {posts.map(({ slug, ...post }) =>
        <div key={slug}>
          <Link to={`/posts/${slug}`}>{post.title}</Link>

          <div>{post.excerpt}</div>
          <div>{post.name}</div>
        </div>
      )}
    </div>
  )
}


export default Indexpost