查询数据已接收但无法从 GraphQL API 访问

Question

我使用 apollo 服务器构建了 API，并且在 graphiql 中一切正常。我使用 apollo 客户端从前端反应应用程序向 api 发出请求。

const [getUserPosts, { loading, error, data }] = useLazyQuery(GET_USER_POSTS);

  useEffect(() => {
    getUserProfile();
    getUserPosts({ variables: { email: userEmail } });
  }, [userEmail]);

所以 getUserProfile 从 express 后端获取用户电子邮件（我有一个 express 服务 react 和一个单独的 graphql api），然后我在 api 上查询该用户的帖子。以下是查询本身

export const GET_USER_POSTS = gql`
  query User($email: String) {
    user(email: $email) {
      email
      posts {
        content
      }
    }
  }
`;

这是 api 服务器上的 typedef 和解析器

const typeDefs = gql`
  type User {
    email: String
    posts: [Post]
  }

  type Post {
    id: ID!
    email: String
    content: String
  }

  type Query {
    users: [User]
    posts: [Post]
    user(email: String): [User]
    post(id: String): [Post]
  }

  type Mutation {
    addPost(email: String, content: String): [Post]
    deletePost(id: String): [Post]
  }
`;

const resolvers = {
  Query: {
    users: () => User.find(),
    posts: () => Post.find(),
    user: (parent, args) => User.find({ email: args.email }),
    post: (parent, args) => Post.find({ _id: args.id }),
  },

  User: {
    posts: async user => {
      try {
        const postsByUser = Post.find({ email: user.email });
        return postsByUser;
      } catch (error) {
        console.log(err);
      }
    },
  },

  Mutation: {
    addPost: async (parent, args) => {
      const newPost = new Post({
        email: args.email,
        content: args.content,
      });
      try {
        newPost.save();
      } catch (err) {
        console.log(err);
      }
    },

    deletePost: async (parent, args) => {
      try {
        const deletedPost = await Post.deleteOne({ _id: args.id });
      } catch (err) {
        console.log(err);
      }
    },
  },
};

那我试试console.log这里的数据

if (loading) {
    console.log(loading);
  }
  if (error) {
    console.log(error);
  }
  if (data) {
    console.log(loading);
    let test = data.user[0];
    //I can see the data logged in the console as an object {email: "abc", posts: [array of posts]}
    console.log(test); 
  }

但是，如果我尝试 console.log(test.posts) 反应结果，则无法读取未定义的属性“posts”

更新-1 !! 因此，当对上述错误的结果做出反应时，我尝试再次刷新页面，它现在可以记录“posts”数组。但有时需要 2 或 3 次刷新才能使其工作，有时当我再次刷新时它不再工作了。为什么会这样？？？？

更新-2 !! 所以我尝试用这条线进行故障排除：

{data ? console.log(data.user[0].posts) : console.log("nothing")}

有趣的是，它实际上在记录数据之前确实在控制台中记录了几次“无”。但这很奇怪，因为我明确写道，如果只有“数据”为“真”，则将其记录在控制台中。但不知何故，“数据”有时就是 null 本身。这个data 是由apollo 客户端提供的，在loading 为假之后，它应该始终为true，data 在loading 之后仍然是null 是false 已经？？？

Answer 1

所以我发现了问题。原来它实际上来自这个块：

useEffect(() => {
    getUserProfile();
    getUserPosts({ variables: { email: userEmail } });
  }, [userEmail]);

在网络选项卡中观察后，似乎我的应用程序在getUserProfile 完成拉取用户电子邮件之前尝试向graphQL api发送请求，因此它发送了一个空请求，因此什么也没收到。我天真地认为getUserProfile 和getUserPosts 将同步执行。所以我用

包裹getUserPosts

if (userEmail) {
      getUserPosts({ variables: { email: userEmail } });
    }

所以现在只有在我收到uerEmail 之后才会执行getUserPosts。