Apollo GraphQL 解构数据不起作用

Question

我正在挖掘，graphql所以我遵循了教程，并且我坚持了这一部分。

主页.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;

解析器

  Query: {
    async getPosts() {
      try {
        const posts = await Post.find().sort({ createdAt: -1 });
        return posts;
      } catch (err) {
        throw new Error(err);
      }
    }
  },

完整代码：https : //github.com/hidjou/classsed-graphql-mern-apollo/tree/react10

在上面的例子中运行良好，它使用它data: { getPosts: posts }来解构返回的数据。但是在我的代码中，我遵循了它，但出现错误

类型错误：无法读取未定义的属性“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>
  );
}

它运作良好。似乎我的代码data在加载之前尝试引用。但我不知道为什么会发生这种情况。代码几乎相同。不同的东西是1. my code is on nextjs，2. my code is on apollo-server-express。其他东西几乎一样，我的解析器使用async/await，并将返回posts。我错过了什么吗？

我的解析器如下所示。

 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)
      }
    },

Answer 1

您的教程可能已过时。在旧版本的 Apollo Client 中，data最初设置为空对象。这样，如果您的代码访问了它的某些属性，它就不会爆炸。虽然这很方便，但也不是特别准确（没有数据，那么我们为什么要提供对象？）。现在，data在您的操作完成之前只是未定义。这就是后一个代码起作用的原因——在loading为 false之前您不能访问数据的任何属性，这意味着查询已完成并且data不再是未定义的。

如果你想data在你的钩子声明时解构，你可以使用这样的默认值：

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

posts如果您愿意，您甚至可以为其分配默认值。

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