How to apply a graphQL object inside a component?

Question

React

Need help until I catch up with what I'm doing wrong with the query object.

there is index.js

import React from "react"
import Layout from "../components/layout"
import Work from "../components/Work"

const IndexPage = ({data}) => (
  <Layout>
    <Work></Work>
  </Layout>
)

export default IndexPage

Inside the Work.js component, I store the query in a WorkQuery and want to display its posts in a loop.

import React from "react"
import { Link, graphql } from "gatsby"

const Work = ({query}) => {
  return (

      {query.allWpPost.edges.map(({ post }) => (
      <div>
        <Link to={post.slug}>
        <p>{post.title}</p>
        </Link>
        <div dangerouslySetInnerHTML={{ __html: post.excerpt }} />
      </div>
      ))}

  )
}

export default Work


export const WorkQuery = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
  }
`

if the functionality is moved to index.js, then everything works, and if inside the component, then the graphQL object is not passed through the function parameters. Maybe this is not enough and it is necessary to perform mapping in index.js at the tag and make the request here?
I just started to figure it out and here is such an ambush. Help if it's easy. Thanks

Answer 1

You can use Gatsby's useStaticQuery hook instead of workquery to get the following

const WorkQuery = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
  }
`

const Work = () => {
const query = useStaticQuery()
  return (
      {query.allWpPost.edges.map(({ post }) => (
      <div>
        <Link to={post.slug}>
        <p>{post.title}</p>
        </Link>
        <div dangerouslySetInnerHTML={{ __html: post.excerpt }} />
      </div>
      ))}

  )
}
export default Work

https://www.gatsbyjs.com/docs/how-to/querying-data...
it is also possible that the problem is in the name of the query instead of WorkQuery, use query

- export const WorkQuery = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
 }
`

- 
+ export const query = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
 }
`

According to documentation: https://www.gatsbyjs.com/docs/how-to/querying-data...

Answer 2

It turned out to be solved with the help of a hook, as advised by vıtalıyırtlach
, but it worked when I moved the WorkQuery query to the hook parameters

const query = useStaticQuery(graphql`
    query WP_Posts {
      allWpPost {
        edges {
          post: node {
            id
            title
            slug
            excerpt
            uri
            }
          }
        }
      }
    }
  `)