GraphQL:加载为False，但数据为；未定义"；-[已解决]

我只是把这个放在这里供将来参考。我从GraphQL休假了几个月。当我回来时，我编码了一个新的解析器，它返回时带有

加载

===false，但

数据

=='undefined'。该解决方案揭示了关于设置GraphQL类型和查询的一个微妙细节，这可能是许多刚刚学习GraphQL的人所难以解决的

在寻找答案的过程中，我搜索了很多关于

加载

====false但

数据

==='undefined'的帖子和其他文章，但没有看到一篇描述我在本案例中解决问题所需信息的文章

以下是不起作用的设置：

模式

type BraintreeClientToken{
    clientToken: String
}

type query{
  getBraintreeClientToken(localUserId: String!): 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字符串不能是那样的。它必须是：

查询库

这是正确的代码

gql

查询字符串没有提到要返回的类型，只列出要返回的字段的名称

这是完全合理的，但它不是超直观的，而且似乎没有被记录或解释太多。我把它贴在这里是为了任何其他可能正在寻找这个信息的人——如果我将来需要查找的话，也是为了我自己

为什么会这样

---

事实上，有一个很好的理由可以解释为什么反应是这样的。这是反应的基础。React的最大好处之一是，您可以拥有一个端点，它能够为您提供与之相关的所有可能的数据片段——但是客户机可以使用查询来获取它所需要的准确数据，方法是设计

查询

，以便它指定该数据。这节省了带宽，而且非常重要的是，使后端开发人员不必创建一百万个不同的端点，将不同的数据集返回到客户端。：）

好吧，这就是棘手的部分。不。gql字符串不能是那样的。它必须是：

查询库

这是正确的代码

gql

查询字符串没有提到要返回的类型，只列出要返回的字段的名称

这是完全合理的，但它不是超直观的，而且似乎没有被记录或解释太多。我把它贴在这里是为了任何其他可能正在寻找这个信息的人——如果我将来需要查找的话，也是为了我自己

为什么会这样

---

事实上，有一个很好的理由可以解释为什么反应是这样的。这是反应的基础。React的最大好处之一是，您可以拥有一个端点，它能够为您提供与之相关的所有可能的数据片段——但是客户机可以使用查询来获取它所需要的准确数据，方法是设计

查询

，以便它指定该数据。这节省了带宽，而且非常重要的是，使后端开发人员不必创建一百万个不同的端点，将不同的数据集返回到客户端。：）

您可以回答自己的问题，然后在足够的时间后将其标记为已接受。这比把答案包括在问题中要好。好的，我把它分成问题和答案。你可以回答你自己的问题，然后在足够长的时间后将其标记为接受。这比把答案包括在问题中要好。好的，我将把它分成问题和答案。

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

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