Apollo GraphQL数据解构不起作用

我正在挖掘

graphql

，所以我遵循了一个教程，在这一部分我结巴了

Home.js

function Home() {
  const {
    loading,
    data: { getPosts: posts }   // <===## Here ##
  } = useQuery(FETCH_POSTS_QUERY);

  return (
      <div>
        {loading ? (
          <h1>Loading posts..</h1>
        ) : (
          posts &&
          posts.map((post) => (
            <p>
              {post.content}
            </p>
          ))
        )}
      </div>
  );
}

const FETCH_POSTS_QUERY = gql`
  {
    getPosts {
      id
      content
    }
  }
`;


export default Home;

全部代码：

在上面的示例中，它工作得很好，它使用

数据：{getPosts:posts}

解构返回的数据。但在我的代码中，我遵循了它，但我得到了一个错误

TypeError:无法读取未定义的属性“getPosts”

相反，如果我像下面这样编写代码

function Home() {
  const {
    loading,
    data // <===## Here ##
  } = useQuery(FETCH_POSTS_QUERY);

  if(loading) return <h1>Loading...</h1>

  const { getPosts: posts } = data // <===## Here ##

  return (
      <div>
        {loading ? (
          <h1>Loading posts..</h1>
        ) : (
          posts &&
          posts.map((post) => (
            <p>
              {post.content}
            </p>
          ))
        )}
      </div>
  );
}

---

你的教程可能已经过时了。在较早版本的Apollo客户端中，

数据

最初设置为空对象。这样，如果代码访问了它的某些属性，它就不会爆炸。虽然这很方便，但也不是特别准确（没有数据，为什么我们要提供对象？）。现在，在操作完成之前，

数据

只是未定义的。这就是后一种代码工作的原因——在

加载

为false之前，您不会访问数据上的任何属性，这意味着查询已经完成，并且

数据不再是未定义的

如果要在声明钩子时分解
数据
，可以使用如下默认值：

const {
  loading,
  data: { getPosts: posts } = {}
} = useQuery(FETCH_POSTS_QUERY)

如果愿意，您甚至可以为
posts
指定默认值

请记住另外两件事：一，如果发生网络错误，
数据
将保持未定义状态，即使
加载
更改为
真
，因此请确保您的代码考虑了此情况。第二，根据您的模式，如果您的响应中有
错误
，则整个
数据
对象可能最终为空。在这种情况下，您仍然会遇到解构问题，因为默认值仅适用于未定义的而不是null

 Query: {
    async getPosts(_, { pageNum, searchQuery }) {
      try {
        const perPage = 5
        const posts =
          await Post
            .find(searchQuery ? { $or: search } : {})
            .sort('-_id')
            .limit(perPage)
            .skip((pageNum - 1) * perPage)
        return posts
      } catch (err) {
        throw new Error(err)
      }
    },

const {
  loading,
  data: { getPosts: posts } = {}
} = useQuery(FETCH_POSTS_QUERY)