Help: Question about the sample code on the Redux website

[caihai123]

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  tagTypes: ['Posts'],
  endpoints: (build) => ({
    listPosts: build.query({
      query: (page = 1) => `posts?page=${page}`,
      providesTags: (result, error, page) =>
        result
          ? [
              // Provides a tag for each post in the current page,
              // as well as the 'PARTIAL-LIST' tag.
              ...result.data.map(({ id }) => ({ type: 'Posts', id })),
              { type: 'Posts', id: 'PARTIAL-LIST' },
            ]
          : [{ type: 'Posts', id: 'PARTIAL-LIST' }],
    }),
    deletePost: build.mutation({
      query(id) {
        return {
          url: `post/${id}`,
          method: 'DELETE',
        }
      },
      // Invalidates the tag for this Post `id`, as well as the `PARTIAL-LIST` tag,
      // causing the `listPosts` query to re-fetch if a component is subscribed to the query.
      invalidatesTags: (result, error, id) => [
        { type: 'Posts', id },
        { type: 'Posts', id: 'PARTIAL-LIST' },
      ],
    }),
  }),
})

Here is the sample code from the official website. Is there any difference between it and the code below?

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  tagTypes: ['Posts'],
  endpoints: (build) => ({
    listPosts: build.query({
      query: (page = 1) => `posts?page=${page}`,
      providesTags: (result, error, page) =>
        result
          ? [
              // Provides a tag for each post in the current page,
              // as well as the 'PARTIAL-LIST' tag.
              ...result.data.map(({ id }) => ({ type: 'Posts', id })),
              { type: 'Posts', id: 'PARTIAL-LIST' },
            ]
          : [{ type: 'Posts', id: 'PARTIAL-LIST' }],
    }),
    deletePost: build.mutation({
      query(id) {
        return {
          url: `post/${id}`,
          method: 'DELETE',
        }
      },
      invalidatesTags: (result, error, id) => [
        { type: 'Posts', id: 'PARTIAL-LIST' },
      ],
    }),
  }),
})

or

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  tagTypes: ['Posts'],
  endpoints: (build) => ({
    listPosts: build.query({
      query: (page = 1) => `posts?page=${page}`,
      providesTags: [{ type: 'Posts', id: 'PARTIAL-LIST' }],
     }),
    deletePost: build.mutation({
      query(id) {
        return {
          url: `post/${id}`,
          method: 'DELETE',
        }
      },
      invalidatesTags: (result, error, id) => [
        { type: 'Posts', id: 'PARTIAL-LIST' },
      ],
    }),
  }),
})

or

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  tagTypes: ['Posts'],
  endpoints: (build) => ({
    listPosts: build.query({
      query: (page = 1) => `posts?page=${page}`,
      providesTags: ['Posts'],
     }),
    deletePost: build.mutation({
      query(id) {
        return {
          url: `post/${id}`,
          method: 'DELETE',
        }
      },
      invalidatesTags: ['Posts'],
    }),
  }),
})

[markerikson]

@caihai123 what specific question do you have? Just showing some bits of code doesn't tell me what you actually want to know.

[caihai123]

I previously had some questions about the first code, which is the sample code from your website. I wanted to know the difference between it and the code below. However, I think I may have figured it out now, so I’ve closed the issue. I'm a beginner, and if you'd like, you're still welcome to answer this question, as I'm not entirely sure if my understanding is correct.

[phryneas]

You posted multiple different pieces of code.
We could spend hours pointing out differences, but all of that effort could be completely irrelevant to what you want to find out.
You can ask a specific question about a specific detail, but this is way too open-ended.

[caihai123]

It’s like this: I was previously working on the pagination query function, so I used the code from this example (https://redux-toolkit.js.org/rtk-query/usage/pagination). After I finished, I realized I could achieve the same effect by setting both providesTags and invalidatesTags to ['Posts'] or [{ type: 'Posts', id: 'PARTIAL-LIST' }]. Specifically, when I execute deletePost, all stored listPosts entries are invalidated. This made me question the example code, as it seems more complex than necessary.

However, I later realized that if I add an updatePost function, I need to set invalidatesTags to (result, error, id) => [{ type: 'Posts', id }]. In this case, if I set providesTags in listPosts to ['Posts'] or [{ type: 'Posts', id: 'PARTIAL-LIST' }], it won’t work as expected.

[phryneas]

I'd recommend you to give the "automated refetching" section in our docs a good read, especially this table. That should explain everything ids do, and what the consequences of using tags without ids are.