有没有一种方法可以在不侧载或嵌入数据的情况下显示相关的模型 ID

Is there a way to show related model ids without sideloading or embedding data

我的理解是使用 serializeIds: 'always' 会给我这个数据,但它不会。

这是我所期待的:

{
  id="1"
  title="some title"
  customerId="2"
}

我收到的输出是:

{
  id="1"
  title="some title"
}

我的代码看起来像这样:

import {
  Server,
  Serializer,
  Model,
  belongsTo,
  hasMany,
  Factory
} from "miragejs";
import faker from "faker";

const ApplicationSerializer = Serializer.extend({
  // don't want a root prop
  root: false,
  // true required to have root:false
  embed: true,
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always"
});

export function makeServer() {
  let server = newServer({
    models: {
      invoice: Model.extend({
        customer: belongsTo()
      }),
      customer: Model.extend({
        invoices: hasMany()
      })
    },

    factories: {
      invoice: Factory.extend({
        title(i) {
          return `Invoice ${i}`;
        },
        afterCreate(invoice, server) {
          if (!invoice.customer) {
            invoice.update({
              customer: server.create("customer")
            });
          }
        }
      }),
      customer: Factory.extend({
        name() {
          let fullName = () =>
            `${faker.name.firstName()} ${faker.name.lastName()}`;

          return fullName;
        }
      })
    },

    seeds(server) {
      server.createList("invoice", 10);
    },

    serializers: {
      application: ApplicationSerializer,
      invoice: ApplicationSerializer.extend({
        include: ["customer"]
      })
    },

    routes() {
      this.namespace = "api";

      this.get("/auth");
    }
  });
}

将配置更改为 root: true, embed: false, 可在 invoice 模型中提供正确的输出,但会添加根并侧载客户,这是我不想要的。

关于 serializeIdsembed 的交互方式,您 运行 出现了一些奇怪的行为。

首先,令人困惑的是当您只是试图禁用 root 时为什么需要设置 embed: true。原因是因为 embed 默认为 false,所以如果你去掉 root 并尝试包含相关资源,Mirage 不知道将它们放在哪里。这是一个令人困惑的选项组合,Mirage 确实应该有不同的“模式”来考虑到这一点。

其次,似乎当 embed 为真时,Mirage 基本上忽略了 serializeIds 选项,因为它认为您的资源将始终被嵌入。 (这里的思路是用一个外键分别取相关的资源,但是嵌入的时候总是一起过来。)这也很迷惑,也不一定是这样。我 opened a tracking issue 在 Mirage 中帮助解决这些问题。

对于今天的你来说,解决这个问题最好的办法就是让root为true,embed为false,这两个都是默认值,这样serializeIds就可以正常工作了,然后编写您自己的 serialize() 函数来为您删除密钥:

const ApplicationSerializer = Serializer.extend({
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always",

  serialize(resource, request) {
    let json = Serializer.prototype.serialize.apply(this, arguments);

    let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)

    return json[root];
  }
});

您应该能够在 /invoices/invoices/1 上进行测试。

Check out this REPL example 并尝试向每个 URL.

发出请求

这是示例中的配置:

import {
  Server,
  Serializer,
  Model,
  belongsTo,
  hasMany,
  Factory,
} from "miragejs";
import faker from "faker";

const ApplicationSerializer = Serializer.extend({
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always",

  serialize(resource, request) {
    let json = Serializer.prototype.serialize.apply(this, arguments);

    let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)

    return json[root];
  }
});

export default new Server({
  models: {
    invoice: Model.extend({
      customer: belongsTo(),
    }),
    customer: Model.extend({
      invoices: hasMany(),
    }),
  },

  factories: {
    invoice: Factory.extend({
      title(i) {
        return "Invoice " + i;
      },
      afterCreate(invoice, server) {
        if (!invoice.customer) {
          invoice.update({
            customer: server.create("customer"),
          });
        }
      },
    }),
    customer: Factory.extend({
      name() {
        return faker.name.firstName() + " " + faker.name.lastName();
      },
    }),
  },

  seeds(server) {
    server.createList("invoice", 10);
  },

  serializers: {
    application: ApplicationSerializer,
  },

  routes() {
    this.resource("invoice");
  },
});

希望一切都解决了 + 对令人困惑的 API 深表歉意!