How to use path parameters on `useMutation`? #2009

bangonkali · 2024-11-15T19:14:09Z

bangonkali
Nov 15, 2024

I am able to query using path params but I am not able to do so using useMutations? Is this a limitation? Or am I doing it wrong?

* Notice the red squiggly at the end of the last example on parameter a.

I have added the following to tsconfig:

"noUncheckedIndexedAccess": true,

I get the following error when forcing a build:

$ tsc -b && vite build
src/routes/_private/dashboard/_layout.index.lazy.tsx:37:70 - error TS2559: Type '{ params: { path: { tenantId: string; }; }; }' has no properties in common with type 'Omit<UseMutationOptions<undefined, never, FetchOptions<{ parameters: { query?: undefined; header?: undefined; path: { tenantId: string; }; cookie?: undefined; }; requestBody?: undefined; responses: { 200: { headers: { [name: string]: unknown; }; content?: undefined; }; }; }>, unknown>, "mutationKey" | "mutationFn">'.

37               client.useMutation("delete", "/api/Tenant/{tenantId}", a);
                                                                        ~


Found 1 error.

However, if I just mouse hover, I get some sort of indication that tenantId is part of the parameter based on the following tip:

If I type something I get the following error:

Then I tried a couple of variations and none worked :(

I am not seeing anything different from my get vs delete json openapi schema.

    "/api/Tenant/{tenantId}": {
      "delete": {
        "tags": [
          "Tenant"
        ],
        "parameters": [
          {
            "name": "tenantId",
            "in": "path",
            "required": true,
            "schema": {
              "type": "string",
              "format": "uuid"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "OK"
          }
        },
        "security": [
          {
            "Bearer": [ ]
          }
        ]
      },
      "get": {
        "tags": [
          "Tenant"
        ],
        "parameters": [
          {
            "name": "tenantId",
            "in": "path",
            "required": true,
            "schema": {
              "type": "string",
              "format": "uuid"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "OK",
            "content": {
              "text/plain": {
                "schema": {
                  "$ref": "#/components/schemas/TenantInfo"
                }
              },
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/TenantInfo"
                }
              },
              "text/json": {
                "schema": {
                  "$ref": "#/components/schemas/TenantInfo"
                }
              }
            }
          }
        },
        "security": [
          {
            "Bearer": [ ]
          }
        ]
      }
    },

There also seems nothing suspicious in the generated d.ts file.

    "/api/Tenant/{tenantId}": {
        parameters: {
            query?: never;
            header?: never;
            path?: never;
            cookie?: never;
        };
        get: {
            parameters: {
                query?: never;
                header?: never;
                path: {
                    tenantId: string;
                };
                cookie?: never;
            };
            requestBody?: never;
            responses: {
                /** @description OK */
                200: {
                    headers: {
                        [name: string]: unknown;
                    };
                    content: {
                        "text/plain": components["schemas"]["TenantInfo"];
                        "application/json": components["schemas"]["TenantInfo"];
                        "text/json": components["schemas"]["TenantInfo"];
                    };
                };
            };
        };
        put?: never;
        post?: never;
        delete: {
            parameters: {
                query?: never;
                header?: never;
                path: {
                    tenantId: string;
                };
                cookie?: never;
            };
            requestBody?: never;
            responses: {
                /** @description OK */
                200: {
                    headers: {
                        [name: string]: unknown;
                    };
                    content?: never;
                };
            };
        };
        options?: never;
        head?: never;
        patch?: never;
        trace?: never;
    };
    ```

drwpow · 2025-01-03T20:14:32Z

drwpow
Jan 3, 2025
Maintainer

I think this may be an issue with the library in general—we have some type issues with the library currently that we’re working through. Will investigate fixing this.

0 replies

jensjakob · 2025-01-07T15:06:16Z

jensjakob
Jan 7, 2025

Seems like the params need to be included in the mutate payload next to the body;

{
  params: { path: { id: tenantId } },
  body: formData,
}

Would be nice if it was included in the useMutiation hook as a default instead.

0 replies

mnlfischer · 2025-06-10T09:57:15Z

mnlfischer
Jun 10, 2025

There is no option object you can pass like in useQuery. So there is currently no option to pass path parameters when using useMutation.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to use path parameters on `useMutation`? #2009

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to use path parameters on useMutation? #2009

Uh oh!

bangonkali Nov 15, 2024

Replies: 3 comments

Uh oh!

drwpow Jan 3, 2025 Maintainer

Uh oh!

Uh oh!

jensjakob Jan 7, 2025

Uh oh!

mnlfischer Jun 10, 2025

How to use path parameters on `useMutation`? #2009

bangonkali
Nov 15, 2024

drwpow
Jan 3, 2025
Maintainer

jensjakob
Jan 7, 2025

mnlfischer
Jun 10, 2025