收到查询数据，但无法从GraphQL API访问

问题描述

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

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

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

SO getUserProfile从快递后端获取用户电子邮件（我有快递服务和一个单独的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)对结果进行反应，则无法读取未定义的属性“ 帖子”

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

UPDATE-2 !! 因此，我尝试使用此行进行故障排除：

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

有趣的是，它实际上没有在记录数据之前在控制台中多次记录了“空”。但这很奇怪，因为我明确地写道，如果仅“ data”为“ true”，则将其记录在控制台中。但是以某种方式“数据”本身就是null。 data由apollo客户端提供，在true为假后，它应始终为loading，在data之后null仍然loading false已经？

解决方法

所以我发现了问题。事实证明，它实际上来自此代码块：

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

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

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

因此，只有在我收到uerEmail之后，getUserPosts才会被执行。