JSON Server: Field "allMessages" in response to the request "http://localhost:3000/messages/1/allMessages" is empty

Question

I am using JSON Server (typicode/json-server) in my project, and I'm facing an issue with fetching data from the "allMessages" field through the request "http://localhost:3000/messages/1/allMessages". When I make a POST request to array "allMessages", I get a 404 error

I have confirmed that the server is up and properly configured, and I have access to other resources on the server, for example, "http://localhost:3000/messages/1". I also made sure that the "allMessages" field does exist in the object with id=1 in the JSON Server's database.

My db.json:

{
  "messages": [
    {
      "id": 1,
      "allMessages": [
        {
          "isMyMsg": true,
          "msg": "Hi my friend.",
          "time": 1690186800,
          "read": true,
          "id": 1
        },
        {
          "isMyMsg": true,
          "msg": "Do you like the new messenger?",
          "time": 1690186845,
          "read": true,
          "id": 2
        },
        {
          "isMyMsg": true,
          "msg": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure commodi voluptas vel cum esse qui labore. Dolorum voluptatem quod nostrum, quaerat beatae iure esse molestias quasi deleniti, vero sapiente obcaecati.",
          "time": 1690187760,
          "read": true,
          "id": 3
        },
        {
          "dateCommunication": 1690287540
        },
        {
          "isMyMsg": false,
          "msg": "Hello my dear friend. How are you? Maybe you need help?",
          "time": 1690287540,
          "read": false,
          "id": 4
        }
      ]
    }
  ]
}

My routes.json:

{
  "/api/messages": "/messages",
  "/api/messages/:id": "/messages/:id",
  "/api/messages/:id/allMessages": "/messages/:id/allMessages"
}

My RTK Query api UserService.ts:

export const messageAPI = createApi({
  reducerPath: "messageAPI",
  tagTypes: ["Messages"],
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3000" }),
  endpoints: (build) => ({
    createMessage: build.mutation<IMessages, object>({
      query: ({ params, message }) => ({
        url: `/api/messages/1/allMessages`,
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json",
        },
        body: {
          isMyMsg: true,
          msg: "ffff",
          time: 1690287540,
          read: false,
        },
      }),
      invalidatesTags: ["Messages"],
    }),
  }),
});

What I've Tried:

Checked the data structure and verified that the "allMessages" field exists in the object with id=1. Expected Result: I expect to use the POST method to the "allMessages" array when requesting "http://localhost:3000/messages/1/allMessages".

Additional Information: I'm starting the server with json-server --watch db.json --routes routes.json JSON Server (typicode/json-server) is configured for my project, and other requests are working correctly. The problem arises only when attempting to retrieve data from the "allMessages" field. I am using version 0.17.3 of JSON Server.

I would greatly appreciate any help or suggestions to resolve this issue. Thank you!

Answer 1

If you want to retrieve allMessages, then why are you making a POST request? Is the server configured to accept POST request and send proper response?

For simple data fetching, you need to use GET request.

Also, I'm not familiar with JSON server but given the db.json data, allMessages key isn't nested inside id key. I doubt you can make a request to 1/allMessages and expect a response. Try making a GET request to messages/allMessages

edited
I think it's not working in your case because JSON server has limited support for nested properties. So you can't access deeply nested properties like messages/allMessages
You need to flatten your db.json to

{
  "allMessages": [
    {
      "isMyMsg": true,
      "msg": "Hi my friend.",
      "time": 1690186800,
      "read": true,
      "id": 1
    }
}

then simply POST to "/allMessages" or "api/allMessages"