Code Monkey home page Code Monkey logo

Comments (8)

sniperadmin avatar sniperadmin commented on July 22, 2024 1

This was the missing step!

@samselikoff that's great, I will check the api
It is working!

from discuss.

samselikoff avatar samselikoff commented on July 22, 2024

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.

sniperadmin avatar sniperadmin commented on July 22, 2024

@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.

samselikoff avatar samselikoff commented on July 22, 2024

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.

sniperadmin avatar sniperadmin commented on July 22, 2024

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:
image

it is not showing it unless i remove the note model definition completely!
image

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.

samselikoff avatar samselikoff commented on July 22, 2024

bizarre... any chance you could share that repo?

from discuss.

sniperadmin avatar sniperadmin commented on July 22, 2024

HYG: https://github.com/sniperadmin/coretabs-chat

Note: this behavior occurs with vue & nuxt projects

from discuss.

samselikoff avatar samselikoff commented on July 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.