feat(tanstack-query): add name and case options

[mrlubos]

Closes #2195

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

🦋 Changeset detected

Latest commit: e5ff024

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hey-api/openapi-ts	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hey-api-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2025 3:30pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/hey-api/openapi-ts/@hey-api/nuxt@2218

npm i https://pkg.pr.new/hey-api/openapi-ts/@hey-api/openapi-ts@2218

npm i https://pkg.pr.new/hey-api/openapi-ts/@hey-api/vite-plugin@2218

commit: e5ff024

[codecov]

Codecov Report

Attention: Patch coverage is 8.59951% with 372 lines in your changes missing coverage. Please review.

Project coverage is 24.94%. Comparing base (4d43c09) to head (e5ff024).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...ins/@tanstack/angular-query-experimental/config.ts	10.29%	61 Missing ⚠️
...api-ts/src/plugins/@tanstack/react-query/config.ts	10.29%	61 Missing ⚠️
...api-ts/src/plugins/@tanstack/solid-query/config.ts	10.29%	61 Missing ⚠️
...pi-ts/src/plugins/@tanstack/svelte-query/config.ts	10.29%	61 Missing ⚠️
...enapi-ts/src/plugins/@tanstack/vue-query/config.ts	10.29%	61 Missing ⚠️
...ugins/@tanstack/query-core/infiniteQueryOptions.ts	0.00%	26 Missing ⚠️
...pi-ts/src/plugins/@tanstack/query-core/queryKey.ts	0.00%	19 Missing ⚠️
...s/src/plugins/@tanstack/query-core/queryOptions.ts	0.00%	11 Missing ⚠️
...rc/plugins/@tanstack/query-core/mutationOptions.ts	0.00%	9 Missing ⚠️
...napi-ts/src/plugins/@tanstack/query-core/plugin.ts	0.00%	1 Missing ⚠️
... and 1 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2218      +/-   ##
==========================================
- Coverage   25.15%   24.94%   -0.21%     
==========================================
  Files         295      294       -1     
  Lines       27677    27903     +226     
  Branches     1272     1272              
==========================================
- Hits         6962     6961       -1     
- Misses      20706    20933     +227     
  Partials        9        9              

Flag	Coverage Δ
unittests	24.94% <8.59%> (-0.21%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[KiwiKilian]

After this change the name for query/mutation options is not inherited anymore from the result of methodNameBuilder by @hey-api/sdk. Was this an intended change?

[mrlubos]

@KiwiKilian can you give an example? I'm inclined to say yes that was the intent, but want to see what has changed on your end

[KiwiKilian]

To generate the same names for options and mutations I have to resemble then name of the methodNameBuilder again. So I have to add these lines:

import { defineConfig as openapiTsDefineConfig } from '@hey-api/openapi-ts';

export const defineConfig = ({ input, name }: { input: string; name: string }) =>
  openapiTsDefineConfig({
    input: input,
    output: {
      clean: true,
      path: `src/modules/api/${name}`,
      lint: 'eslint',
      format: 'prettier',
    },
    plugins: [
      {
        name: '@hey-api/typescript',
        enums: 'javascript',
      },
      {
        name: '@hey-api/sdk',
        methodNameBuilder: (operation) => {
          const id = operation.id;

          if (!id) {
            throw new Error('Missing operation.id');
          }

          return `${name}Api${id.charAt(0).toUpperCase() + id.slice(1)}`;
        },
      },
      {
        name: '@tanstack/react-query',
+        queryOptions: {
+          name: (id) => {
+            return `${name}Api${id.charAt(0).toUpperCase() + id.slice(1)}Options`;
+          },
+        },
+        mutationOptions: {
+          name: (id) => {
+            return `${name}Api${id.charAt(0).toUpperCase() + id.slice(1)}Mutation`;
+          },
+        },
      },
    ],
  });

Maybe it would be nice to pass in both the original id an the result of methodNameBuilder to queryOptions and mutationOptions.

[mrlubos]

Yep, duplication definitely feels like the right abstraction here. You can move that duplicate code into a function if you want to clean up your config a bit. The goal is to more cleanly separate plugins, it's simpler when you don't have to reason through what the SDK plugin does. That being said, I'll likely expose the Plugin API in these methods at some point. You could then grab the methodNameBuilder cleanly.

[KiwiKilian]

Absolutely valid, just wanted to make sure, you are aware of the implications. Thank you once again for you work!

[mrlubos]

Thanks for the support as always!