Recent CRUD Tutorial

Where can I find a recent simple CRUD tutorial. All tutorials on the web seem outdated?

Some topics I would appreciate if the tutorial has: -Fetching and posting data with axios -State management

Disclaimer: I have used and completed the tutorial on official docs but concepts gets more complicated as you progress.

You can find update tutorial here

https://youtube.com/playlist?list=PLk51HrKSBQ88wDXgPF-QLMfPFlLwcjTlo

this will help you a lot .

1 Like

Actually I came across these tutorials. I got lost when trying to get or post data to live API (Actual API not static JSON file)

Let’s say am using fetch to call an endpoint. Where do I make the call? Controller,Model or Adapter?

Yeah that’s a fair question. There’s no “one true” answer but generally i would say you’re going to do that in a component. Controller would probably be the next most common spot. Model and Adapter are part of Ember Data, so if you’re using Ember Data you’d define a model to tell your app how a particular record looks (what attributes and relationships it has) and the adapter would tell your app how to construct request URLs and other params related to making requests.

So I guess the first thing to ask is: will you use Ember Data or no? There’s nothing wrong with either direction. For simple “resource” style CRUD (where you have a collection of restful endpoints around a specific model/resource) Ember Data is a really great fit and can save you some time. But you could also use something like GraphQL or just raw fetch. If you use Ember Data it’s going to handle most/all of the actual http requests for you so you don’t have to worry about fetch/axios syntax. If not then you have to manage all that stuff on your own. It may make sense to make your own service to handle some of this for you.

Now as far as where to make your requests (whether Ember Data or fetch/axios/etc)… As a general rule of thumb there are primary ways you’d “load” data:

  • Route model hook
  • Component

Route models take care of a lot of the async complexities for you (loading/error substates, hooks for doing various things, etc). Components give you a little more flexibility over how and where data is loaded and can make it easier to render things as they are fetched vs waiting until all the data is fetched. Again here there’s no “wrong” way, but using routes to load your data is probably the easiest way.

Writing data is a little less clear-cut because it usually results from user action. So again most of the time this will probably be done in a component, but you could also bubble stuff up to a controller and do it there, or if you’re not yet using components you could do it in the route template/controller. Generally you’d have an async action or ember concurrency task that would perform any logic around a POST/PUT, or if using Ember Data a call to <model>.save()

Happy to provide more context about any of that if it doesn’t make any sense.

Also to answer your original question… unfortunately there isn’t a lot that jumps to mind. As is the case with a lot of programming tutorials they get out of date really quickly. Other than the official guides and official tutorial the thing that jumps to mind first is the Rock’n’Roll with Ember book. It’s kept up to date and goes beyond the official guides/tutorials to build a more real-world app.

1 Like

Ok Thanks for taking time to elaborate