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

Question

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

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

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

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

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

这是 api 服务器上的类型定义和解析器

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” of undefined

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

更新 2 ！！所以我尝试用这一行进行故障排除：

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

有趣的是，在记录数据之前，它实际上确实在控制台中记录了几次“无”。但这很奇怪，因为我明确写道，如果只有“数据”为“真”，则将其记录在控制台中。但不知何故，“数据”有时是 null 本身。这个data是apollo客户端提供的，在loading为false后应该一直是true，怎么在loading为false后data还是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 才会被执行。

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

Query data is received but can not be accessed from GraphQL API

javascript

reactjs

graphql

apollo-server

apollo-client