Starck43
@Starck43
Web разработчик (Python, PHP, SQL + frontend )

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

Нужна помощь, пока не догоняю что делаю не так с объектом 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 у тега выполнять маппинг и выносить запрос сюда же?
Я только начал разбираться и тут такая засада. Помогите, если нетрудно. Спасибо
  • Вопрос задан
  • 37 просмотров
Решения вопроса 1
w13vitaliy
@w13vitaliy
self-taught developer since 2020
Вы можете использовать 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...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Starck43
@Starck43 Автор вопроса
Web разработчик (Python, PHP, SQL + frontend )
Получилось решить с помощью хука, как советовал vıtalıyırtlach
но сработало когда я запрос WorkQuery перенес в параметры хука
const query = useStaticQuery(graphql`
    query WP_Posts {
      allWpPost {
        edges {
          post: node {
            id
            title
            slug
            excerpt
            uri
            }
          }
        }
      }
    }
  `)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы