@apollo/react-hooksのuseQueryで取得できるdata

Question

悩んでいる箇所

現在apolloを使用してwordpressからgraphqlでデータの取得を試みています。
その際にuseQuery()のdataの値が、一度undefinedになった後、データを取得してしまっています。

コード

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</pre>
  );
};

const BlogList = () => {
  const blogClassName = 'p-blog'
  return (
    <PostLayout>
      <ApolloProvider client={client}>
        <h1>My First Apollo Theme!</h1>
        <Posts />
    </ApolloProvider>
    </PostLayout>
  )
}

export default BlogList

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

結果

undefined
{posts: {…}}

実現したいこと

dataの取得がundefinedではなく、{posts: {…}}を取得できるようにしたいです。

Answer 1

単純に{console.log}の場所が悪かったみたいでした。
loadingのあとにconsole.logに置いてみたら取得できました。