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

Question

我的理解是使用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模型中提供了正确的输出，但添加了root和sideloads客户，这是我不想要的。

Answer 1

在serializeIds与embed的交互方面，您遇到了一些奇怪的行为。

首先，当您试图禁用根目录时，为什么需要设置embed: true，这让人感到困惑。原因是embed默认为false，所以如果您删除根并尝试包含相关资源，Mirage不知道将它们放在哪里。这是一个令人困惑的选项组合，幻影真的应该有不同的"；模式"；考虑到这一点。

其次，当embed为真时，Mirage基本上忽略了serializeIds选项，因为它认为您的资源将始终嵌入。(这里的想法是，外键用于单独获取相关资源，但当它们被嵌入时，它们总是会一起出现。(这也很令人困惑，不一定是这样。我在幻影中打开了一个跟踪问题来帮助解决这些问题。

对于今天的你来说，解决这个问题的最好方法是将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上测试这一点。

查看这个REPL示例，并尝试对每个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感到抱歉！