Как применить graphQL объект внутри компоненты?

Question

[Станислав Шабалин]

Нужна помощь, пока не догоняю что делаю не так с объектом query.

есть 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

Внутри компонента Work.js я сохраняю запрос в WorkQuery и хочу вывести его посты у цикле.

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
          }
        }
      }
    }
  }
`

если функционал вынести в index.js, то все работает, а если внутри компоненты, то объект graphQL не передаётся через параметры функции. Может этого не достаточно и надо в index.js у тега выполнять маппинг и выносить запрос сюда же?
Я только начал разбираться и тут такая засада. Помогите, если нетрудно. Спасибо

Answer 1

[vıtalıyırtlach]

Вы можете использовать hook от Gatsby useStaticQuery вместо workquery тогда получиться следующее

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...

так же возможно проблема в наименовании запроса вместо WorkQuery используйте 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
          }
        }
      }
    }
 }
`

Согласно документации: https://www.gatsbyjs.com/docs/how-to/querying-data...

Answer 2

[Станислав Шабалин]

Получилось решить с помощью хука, как советовал vıtalıyırtlach
но сработало когда я запрос WorkQuery перенес в параметры хука

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

Comments

[vıtalıyırtlach]

Извините моя ошибка заключается в том что в useStaticQuery я ничего не передал должно быть так

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

const Work = () => {
const query = useStaticQuery(WorkQuery )
  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

[Станислав Шабалин]

vıtalıyırtlach, спасибо, что откликнулись. Я понял, что так можно. )