Question on setQueryData and addEntity

[JeffryGonzalez]

Hi! In the README it refers to either invalidating the query (invalidateQueries) or using addEntity. I can't find an example of addEntity anywhere in the playground. When I try to use it as follows:

  addCourse(course: CourseToAdd) {
    return this.http.post<Course>('/api/courses', course).pipe(
      tap((newCourse) => {
        this.queryClient.setQueryData<Course>(
          ['courses'],
          addEntity('courses', newCourse),
        );
      }),
    );
  }

I get a type error on the 'courses' param to addEntity. "Argument of type '"courses"' is not assignable to parameter of type 'keyof Course'.ts(2345)".

Am I doing something wrong, or is this still baking and should stick with this.queryClient.invalidateQueries(['courses']); as in the playground for now. Thank you!

[NetanelBasal]

What's the type of Course? The assumption is that the response is an object.

[JeffryGonzalez]

thanks. The Course type looks like this:

type Course = {
    id: string;
    slug: string;
    title: string;
    description: string;
    courseCategoryId: string;
}

And the response from the API's POST looks like this:

{
  "id": "cla9x763y000aw6c4b3kdxriw",
  "slug": "toys",
  "title": "Workshop: Building toys",
  "description": "Making games and stuff",
  "courseCategoryId": "frontend"
}

In the service, I'm mapping the response from the API:

  getCourseList() {
    return this.useQuery(['courses'], () =>
      this.http
        .get<CollectionResponse<Course>>('/api/courses')
        .pipe(map((r) => r.data)),
    );
  }

Because the response on the GET /api/courses looks like this:

{
  "data": [
    {
      "id": "cla5g9nvx003mw6v86k7htpiz",
      "slug": "dod",
      "title": "DevOps for Developers",
      "description": "Containers, Kubernetes, All That.",
      "courseCategoryId": "backend"
    },
    {
      "id": "cla9x763y000aw6c4b3kdxriw",
      "slug": "toys",
      "title": "Workshop: Building toys",
      "description": "Making games and stuff",
      "courseCategoryId": "frontend"
    }
  ]
}

If it'd help, I'll create a repo to reproduce.

[NetanelBasal]

change the generic to CollectionResponse and pass the data key

[JeffryGonzalez]

Brilliant. Thank you! Helped me get the 💡 moment, too. Fantastic stuff.

For Reference:

addCourse(course: CourseToAdd) {
    return this.http.post<Course>('/api/courses', course).pipe(
      tap((newCourse: Course) => {
        this.queryClient.setQueryData(
          ['courses'],
          addEntity<CollectionResponse<Course>, 'data'>('data', newCourse),
        );
      }),
    );
  }

[NetanelBasal]

You can omit the second generic (i.e data)

[JeffryGonzalez]

Thanks - tried but it type errors - Expected 2 type arguments, but got 1. - however if I just leave the whole generic off, it seems to infer it just fine.

addCourse(course: CourseToAdd) {
    return this.http.post<Course>('/api/courses', course).pipe(
      tap((newCourse: Course) => {
        this.queryClient.setQueryData(
          ['courses'],
          addEntity('data', newCourse),
        );
      }),
    );
  }

And, fwiw, I think addEntity is a good name, after looking at the implementation.

The fact that my API returns the array in a data property makes it weird in templates (*ngFor let x in model.data.data), so I modified the useQuery to take a generic and mapped it.

  getCourseList() {
    return this.useQuery<{ courses: Course[] }>(['courses'], () =>
      this.http
        .get<CollectionResponse<Course>>('/api/courses')
        .pipe(map((r) => ({ courses: r.data }))),
    );
  }

So now, addCourse is:

  addCourse(course: CourseToAdd) {
    return this.http.post<Course>('/api/courses', course).pipe(
      tap((newCourse: Course) => {
        this.queryClient.setQueryData(
          ['courses'],
          addEntity('courses', newCourse),
        );
      }),
    );
  }

and the *ngFor is less weird: ` *ngFor="let course of model.data.courses"

[dzena]

Sorry, I still don't get how does it work. By looking at the source code, it shouldn't I think. Might be too late tho 😄
What I mean, addEntity will receive already portion of the global state that we are interested in. No need to pass entitiesKey again, right?
In this particular case this.queryClient.setQueryData(['courses']) will curry the array of courses to the addEntity, right?

Thank you! 🙇

[NetanelBasal]

No. The interface should be :

interface UsersApi {
  items: Array<{
    total_count: number;
    incomplete_results: boolean;
    items: [
      {
        login: string;
        id: number;
      }
    ];
  }>
}

[NetanelBasal]

It doesn't support flat array response

[NetanelBasal]

We can add this signature to the function

[JeffryGonzalez]

Ah - so I kind of lucked out - none of my APIs return flat array responses. I kind of like it how it is - you can map an API call that returns a flat array to a structure like I did above.

With @dzena's example, you lose all the isLoading, isSuccess, etc. from the result when you map it like that, right? Seems like mapResultData is the right choice here. I'll fork it and try it out.

It wouldn't hurt to have another signature on the addEntity method, though, I suppose. So, if I'm understanding correctly, the todos example in the playground wouldn't work as-is if you used addEntity instead of invalidateQueries?

[JeffryGonzalez]

Hey @dzena - see what you think: https://stackblitz.com/edit/angular-ivy-ewnzub?file=src/app/app.component.ts