{данные}, которые можно получить с помощью useQuery @ apollo / реагировать на крючки - PullRequest
Новая
       21

{данные}, которые можно получить с помощью useQuery @ apollo / реагировать на крючки

0 голосов
/ 29 апреля 2020

Проблемы

Я пытаюсь получить данные из WordPress с GraphQL с помощью Apollo. В этом случае значение данных в useQuery () извлекается после того, как для него установлено значение undefined.

Соответствующий исходный код

Мой ApolloClient и поставщик настройки следующим образом:

BlogList.jsx 

<code>import React from 'react'
import ApolloClient, {gql, InMemoryCache} from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks"

import PostLayout from '../components/PostLayout'


const client = new ApolloClient({
  uri: "https://localhost.info/graphql",
  cache
});

export const POSTS_QUERY = gql`
  {
  posts {
    nodes {
      id
      title
      content
      uri
      date
    }
  }
  }
`

const Posts = () => {
  const { loading, error, data } = useQuery(POSTS_QUERY);
  console.log(data)
  if (loading) return <p>Loading Posts...</p>
  if (error) return <p> {data}Something wrong happened!</p>
  if (data === undefined) return <p>ERROR</p>
  return (
    <pre>{data}test
); }; const BlogList = () => {const blogClassName = 'p-blog' return (

Моя первая тема об Аполлоне!

)} экспорт по умолчанию BlogList

index.jsx 

import React from 'react'

import Layout from 'components/Layout'
import SEO from 'components/SEO'
import 'scss/layout/index.scss'
import 'scss/object/project/_top.scss'
import Content from '../components/Content'
import BlogList from '../templates/BlogList'

class IndexPage extends React.Component<IndexProps, showState> {
  constructor(props: showState) {
    const post: boolean = props.pageContext.post
    super(props)
    this.state = {
      showContent: post ? post : false,
      tabType: post ? props.pageContext.node.categories[0].name : '',
      props: this.props,
      post: post ? post : false,
    }
    this.clickShowContent = this.clickShowContent.bind(this)
    this.clickShowPost = this.clickShowPost.bind(this)
  }
  clickShowContent(type: string) {
    this.setState({
      showContent: !this.state.showContent,
      tabType: type,
    })
  }
  clickShowPost() {
    this.setState({
      post: true ? false : true,
    })
  }

  render() {
    const topClassName = 'p-top'
    const menuClassName = 'l-menu'
    return (
      <Layout>
        <SEO />
          <nav className={`${menuClassName}__blocks`} id="js-topMenu">
            <button
              onClick={() => this.clickShowContent(TAB_TYPES.BLOG)}
              className={`js-btnBlog js-topBtn ${topClassName}__blogBlock ${menuClassName}__block`}
            >
              <div className={`${topClassName}__blogContainer`}>
                <div
                  className={`${menuClassName}Blog ${menuClassName}__subHeading ${menuClassName}--blog`}
                >
                  Blog
                </div>
              </div>
            </button>
          </nav>
        </div>
        {this.state.showContent ? (
          <PostContext.Provider value={this.state}>
           <BlogList />
          </PostContext.Provider>
        ) : null}
      </Layout>
    )
  }
}

export default IndexPage

Результат

Просмотр BlogList 

undefined
{posts: {…}}

Чего я хочу достичь.

Я хочу иметь возможность получать {posts: {...}} вместо undefined для данных.

...