GraphQL:加载错误,但数据为 "undefined" - [已解决]

GraphQL: Loading is False, but Data is "undefined" - [SOLVED]

我只是把它放在这里以供将来参考。我从 GraphQL 休息了几个月。当我回来时,我编写了一个新的解析器,它返回 loading === false 但 data === 'undefined'。该解决方案揭示了一个关于设置 GraphQL 类型和查询的微调细节,这可能是任何刚学习 GraphQL 的人都会遇到的问题。

为了寻找答案,我搜索了许多关于 loading === false 但 data === 'undefined' 的 SO 帖子和其他文章,但没有看到一篇描述了我解决问题所需的信息。

这是的设置:

架构

type BraintreeClientToken{
    clientToken: String
}

type query{
  getBraintreeClientToken(localUserId: String!): BraintreeClientToken
}

查询图书馆

这是有错误的代码

const GETBRAINTREECLIENTTOKEN_QUERY = gql`
    query ($localUserId: String!)  {
        getBraintreeClientToken(localUserId: $localUserId) {
            BraintreeClientToken
        }
    }
`;

解析器

   getBraintreeClientToken: (parent, args, context) => {
        const userid = context.userId;

        let BraintreeClientToken = {
            clientToken: '',
        }

        return Promise.resolve()
            .then(() => {
                //CODE HERE THAT CORRECTLY OBTAINS THE CLIENTTOKEN FROM THE BRAINTREE API -- NOT RELEVANT TO THIS POST
                return clientToken;
            })
            .then((clientToken) => {
                BraintreeClientToken.__typename = 'BraintreeClientToken';
                BraintreeClientToken.clientToken = clientToken.clientToken;
                return BraintreeClientToken;
            })
            .then((BraintreeClientToken) => {
                return BraintreeClientToken;
            })
            .catch((err) => {
                console.log(err);
            });
    }

查看查询库代码。起初我觉得这很合理。毕竟,名为 getBraintreeClientToken 的解析器正在返回一个名为 BraintreeClientToken 的对象,并且它有一个类型名称 BraintreeClientToken。这不应该是 gql 查询字符串中需要的内容吗?

[见下面的答案]

好吧,这是棘手的部分。不可以。gql 字符串不能那样。它必须是:

查询图书馆

这是正确的代码

   const GETBRAINTREECLIENTTOKEN_QUERY = gql`
    query ($localUserId: String!)  {
        getBraintreeClientToken(localUserId: $localUserId) {
            clientToken
        }
    }
`;

gql 查询字符串没有提及返回的类型,只列出了返回的字段的名称。

这一切都非常合理,但不是非常直观,而且似乎没有太多的记录或解释。我将它张贴在这里,以供可能正在寻找此信息的任何其他人使用——如果我将来需要查找它,也可以为我自己张贴。

为什么会这样

React 之所以如此,其实是有充分理由的。它是 React 的基础。 React 的最大好处之一是,您可以拥有一个端点,该端点能够为您提供与其相关的所有可能的数据——但客户端可以使用查询来获取所需的确切数据,通过设计 Query 以便它指定该数据。这节省了带宽,而且非常重要的是,它使后端开发人员不必创建一百万个不同的端点来将不同的数据集返回给客户端。 :)