Comments (8)
This was the missing step!
@samselikoff that's great, I will check the api
It is working!
from discuss.
If you're asking why the notes aren't associated with the customer, it's because you need to associate them one way or another.
You said you tried server.createList("note", 2, { customer })
, but this is passing in a Customer to a Note, but in your models
schema a Note doesn't have a reference to a Customer.
So you can either add the belongsTo
side there, or you can call customer.update({ notes: newNotes })
on the Customer. (Btw, I think you have a typo, your hasMany
should be plural notes: hasMany()
rather than singular "note".
Here's a demo, open our WIP inspector and copy+paste this code into the Config tab:
import { Server, Factory, Model, hasMany, trait } from "miragejs";
import faker from "faker";
export default new Server({
models: {
note: Model,
customer: Model.extend({
notes: hasMany(),
}),
},
factories: {
note: Factory.extend({
displayText() {
return faker.lorem.sentence(50);
},
date() {
return faker.date.past().toLocaleDateString();
},
by() {
return faker.internet.email();
},
}),
customer: Factory.extend({
withNotes: trait({
afterCreate(customer, server) {
customer.update({
notes: server.createList("note", 2),
});
},
}),
}),
},
seeds(server) {
server.createList("customer", 3, "withNotes");
},
});
from discuss.
@samselikoff
Many thanks for such explanation!
on the inspector, the code works, but on my machine, it works only without specifying note model (only the factory does it)
import { Server, Factory, Model, hasMany, trait } from "miragejs";
import faker from "faker";
export default new Server({
models: {
// note: Model, // commented this
customer: Model.extend({
// notes: hasMany(), // commented this
}),
},
factories: {
note: Factory.extend({
displayText() {
return faker.lorem.sentence(50);
},
date() {
return faker.date.past().toLocaleDateString();
},
by() {
return faker.internet.email();
},
}),
customer: Factory.extend({
withNotes: trait({
afterCreate(customer, server) {
customer.update({
notes: server.createList("note", 2),
});
},
}),
}),
},
seeds(server) {
server.createList("customer", 3, "withNotes");
},
});
from discuss.
You're welcome!
Hm, what do you mean exactly? The Note model should definitely be defined in the schema if it's a separate resource in your backend...
What behavior did you get vs. what were you expecting when you did it on your machine?
from discuss.
I copied the same demo code you advised into my project expecting to see the note trait
in the console with the customer data
the result is strange:
it is not showing it unless i remove the note model definition completely!
it is now working with this demo:
import { Server, Factory, Model, trait } from "miragejs";
import faker from "faker";
export default new Server({
models: {
// note: Model,
customer: Model.extend({
// notes: hasMany()
})
},
factories: {
note: Factory.extend({
displayText() {
return faker.lorem.sentence(4);
},
date() {
return faker.date.past().toLocaleDateString();
},
by() {
return faker.internet.email();
}
}),
customer: Factory.extend({
withNotes: trait({
afterCreate(customer, server) {
customer.update({
notes: server.createList("note", 2)
});
}
})
})
},
seeds(server) {
server.createList("customer", 3, "withNotes");
},
routes() {
this.get("/customers");
}
});
from discuss.
bizarre... any chance you could share that repo?
from discuss.
HYG: https://github.com/sniperadmin/coretabs-chat
Note: this behavior occurs with vue & nuxt projects
from discuss.
Ah – so, if you look at the inspector demo, you'll see the data is in the database. The reason it's not showing up in the request is because you haven't defined any includes in your serializer layer.
Try this one out in the inspector:
import { Server, Factory, Model, hasMany, trait, RestSerializer } from "miragejs";
import faker from "faker";
export default new Server({
models: {
note: Model,
customer: Model.extend({
notes: hasMany(),
}),
},
factories: {
note: Factory.extend({
displayText() {
return faker.lorem.sentence(50);
},
date() {
return faker.date.past().toLocaleDateString();
},
by() {
return faker.internet.email();
},
}),
customer: Factory.extend({
withNotes: trait({
afterCreate(customer, server) {
customer.update({
notes: server.createList("note", 2),
});
},
}),
}),
},
serializers: {
application: RestSerializer,
customer: RestSerializer.extend({
include: ['notes'],
embed: true
})
},
seeds(server) {
server.createList("customer", 3, "withNotes");
},
routes() {
this.get('/customers')
}
});
and you can read more about the include hook here: https://miragejs.com/api/classes/serializer/#include
from discuss.
Related Issues (20)
- Add Middleware support to Mirage HOT 1
- Custom exception post-processing HOT 2
- Support multiple server instance. HOT 5
- Tracking issue for routing DSL / passthrough / namespace improvements
- Model hooks / default attributes HOT 5
- Passthrough external requests with wildcard HOT 4
- hasMany to hasMany (manyToMany) fixture associations not created HOT 1
- nativescript-vue with miragejs HOT 1
- Question: Expose mocked API as standalone on a specific port? HOT 3
- Be able to mock websocket calls HOT 2
- More array functions for models / collections HOT 8
- routes for related resources HOT 2
- [Suggestion] Automatically parse request body based on content type HOT 2
- Feature Request: Generate API docs from test runs HOT 3
- How to only intercept request that defined in routes HOT 2
- server.createList() and server.create() creates duplicate values with dynamic factory definition
- Is it possible to use a combination of mock API's and actual API calls ? HOT 1
- Using a nested primary id for update and deletes
- Adding context object to handler to mock auth
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discuss.