+8

.changeset/ten-mice-switch.md

··· 1 1 + --- 2 2 + '@example/openapi-ts-tanstack-svelte-query': patch 3 3 + '@example/openapi-ts-tanstack-react-query': patch 4 4 + '@example/openapi-ts-tanstack-vue-query': patch 5 5 + '@hey-api/docs': patch 6 6 + --- 7 7 + 8 8 + docs: add basic TanStack Query plugin description

+1 -1

docs/.vitepress/config/en.ts

··· 48 48 }, 49 49 { 50 50 link: '/openapi-ts/tanstack-query', 51 51 - text: 'TanStack Query <span class="soon">soon</span>', 51 51 + text: 'TanStack Query', 52 52 }, 53 53 ], 54 54 text: 'Plugins',

+7

docs/embed.ts

··· 25 25 'openapi-ts.config.ts,src/client/schemas.gen.ts,src/client/services.gen.ts,src/client/types.gen.ts,src/App.tsx', 26 26 view: 'editor', 27 27 }); 28 28 + case 'hey-api-client-fetch-plugin-tanstack-react-query-example': 29 29 + return await sdk.embedProjectId(container, projectId, { 30 30 + height: 700, 31 31 + openFile: 32 32 + 'openapi-ts.config.ts,src/client/@tanstack/react-query.gen.ts,src/client/types.gen.ts,src/App.tsx', 33 33 + view: 'editor', 34 34 + }); 28 35 case 'hey-api-example': 29 36 return await sdk.embedProjectId(container, projectId, { 30 37 height: 700,

+2 -2

docs/index.md

··· 42 42 link: /openapi-ts/integrations 43 43 linkText: Find out more 44 44 - icon: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"><g fill="none" fill-rule="evenodd"><path d="M150.276 61.344c3.093-14.981 3.756-26.471 1.757-34.815-1.189-4.962-3.362-9.01-6.668-11.93-3.49-3.084-7.901-4.597-12.858-4.597-8.178 0-16.775 3.725-25.963 10.802-3.747 2.887-7.636 6.366-11.676 10.44a8.743 8.743 0 0 0-1.09-1.163C82.36 19.915 72.746 13.599 64.523 11.164c-4.89-1.448-9.48-1.586-13.66-.181-4.414 1.483-7.93 4.55-10.41 8.845-4.094 7.089-5.174 16.403-3.648 27.904.623 4.688 1.686 9.794 3.189 15.327a8.725 8.725 0 0 0-1.698.38c-14.489 4.797-24.749 9.955-30.96 15.85-3.696 3.506-6.109 7.41-6.981 11.733-.921 4.562-.023 9.137 2.454 13.43 4.087 7.078 11.6 12.66 22.304 17.082 4.298 1.776 9.161 3.384 14.595 4.83a8.735 8.735 0 0 0-.57 1.776c-3.092 14.98-3.756 26.47-1.756 34.814 1.188 4.962 3.362 9.01 6.667 11.93 3.49 3.084 7.902 4.597 12.86 4.597 8.177 0 16.774-3.725 25.962-10.802 3.787-2.917 7.72-6.44 11.805-10.57.42.656.936 1.267 1.546 1.81 11.42 10.166 21.034 16.482 29.257 18.917 4.89 1.448 9.48 1.586 13.66.181 4.414-1.483 7.93-4.55 10.41-8.845 4.094-7.089 5.174-16.403 3.648-27.904-.645-4.857-1.764-10.164-3.354-15.929a8.715 8.715 0 0 0 1.863-.398c14.489-4.797 24.749-9.955 30.96-15.85 3.696-3.506 6.109-7.41 6.981-11.733.921-4.562.023-9.137-2.454-13.43-4.087-7.078-11.6-12.66-22.304-17.082-4.427-1.828-9.452-3.48-15.082-4.959.2-.49.36-1.006.47-1.543Z" fill="#002C4B" fill-rule="nonzero"/><path d="M80.397 64h29.211a5 5 0 0 1 4.337 2.512l14.632 25.5a5 5 0 0 1 0 4.976l-14.632 25.5a5 5 0 0 1-4.337 2.512H80.397a5 5 0 0 1-4.337-2.512l-14.632-25.5a5 5 0 0 1 0-4.976l14.632-25.5A5 5 0 0 1 80.397 64Zm25.59 6.277a5 5 0 0 1 4.339 2.513l11.017 19.224a5 5 0 0 1 0 4.972l-11.017 19.224a5 5 0 0 1-4.338 2.513h-21.97a5 5 0 0 1-4.339-2.513L68.662 96.986a5 5 0 0 1 0-4.972L79.679 72.79a5 5 0 0 1 4.338-2.513h21.97Zm-3.906 6.864H87.924a5 5 0 0 0-4.335 2.51l-7.1 12.358a5 5 0 0 0 0 4.982l7.1 12.358a5 5 0 0 0 4.335 2.51h14.157a5 5 0 0 0 4.335-2.51l7.1-12.358a5 5 0 0 0 0-4.982l-7.1-12.358a5 5 0 0 0-4.335-2.51Zm-3.762 6.571a5 5 0 0 1 4.334 2.506l3.33 5.788a5 5 0 0 1 0 4.988l-3.33 5.788a5 5 0 0 1-4.334 2.506h-6.633a5 5 0 0 1-4.334-2.506l-3.33-5.788a5 5 0 0 1 0-4.988l3.33-5.788a5 5 0 0 1 4.334-2.506h6.633Zm-3.315 6.473a4.313 4.313 0 1 0-.003 8.63 4.313 4.313 0 1 0 .003-8.63ZM60 94.5h7.768" fill="#FFD94C"/><path d="M54.86 108.358a2.713 2.713 0 0 1 3.718 1.041l.475.845a269.421 269.421 0 0 0 11.888 19.191c4.867 7.15 10.34 14.39 16.421 21.716a2.776 2.776 0 0 1-.296 3.847l-.612.537c-20.107 17.568-33.176 21.078-39.206 10.527-5.898-10.32-3.764-29.08 6.403-56.28a2.748 2.748 0 0 1 1.21-1.424Zm85.674 20.684a2.708 2.708 0 0 1 3.126 2.152l.153.792c4.97 26.01 1.47 39.014-10.497 39.014-11.706 0-26.607-11.091-44.703-33.273a2.725 2.725 0 0 1-.613-1.745 2.712 2.712 0 0 1 2.73-2.694l.955.007c7.62.041 15.03-.223 22.226-.794 8.498-.673 17.373-1.826 26.623-3.46Zm6.875-55.23c.523-1.41 2.1-2.149 3.546-1.663l.788.266c25.84 8.803 35.66 18.477 29.455 29.022-6.068 10.314-23.714 17.823-52.936 22.527a2.852 2.852 0 0 1-1.88-.345 2.726 2.726 0 0 1-.993-3.772l.5-.837c3.988-6.694 7.592-13.356 10.813-19.986 3.803-7.83 7.372-16.233 10.707-25.212Zm-85.67-7.776a2.852 2.852 0 0 1 1.878.345 2.726 2.726 0 0 1 .994 3.772l-.5.837c-3.988 6.694-7.592 13.356-10.813 19.986-3.803 7.83-7.372 16.233-10.707 25.212-.523 1.41-2.1 2.149-3.546 1.663l-.788-.266c-25.84-8.803-35.66-18.477-29.455-29.022C14.87 78.25 32.516 70.74 61.738 66.036Zm41.807-31.57c20.107-17.57 33.176-21.079 39.206-10.528 5.898 10.32 3.764 29.08-6.403 56.28a2.748 2.748 0 0 1-1.21 1.424 2.713 2.713 0 0 1-3.717-1.041l-.475-.845a269.421 269.421 0 0 0-11.888-19.191c-4.867-7.15-10.34-14.39-16.421-21.716a2.776 2.776 0 0 1 .296-3.847ZM57.684 18c11.706 0 26.607 11.091 44.703 33.273.402.492.618 1.11.613 1.745a2.712 2.712 0 0 1-2.73 2.694l-.955-.007c-7.62-.041-15.03.223-22.226.794-8.498.673-17.373 1.826-26.623 3.46a2.708 2.708 0 0 1-3.126-2.153l-.153-.792C42.217 31.004 45.717 18 57.684 18Z" fill="#FF4154"/></g></svg> 45 45 - title: TanStack Query <span class="soon">Soon</span> 46 46 - details: Generate query keys and query functions. Use them with our REST clients or bring your own. 45 45 + title: TanStack Query 46 46 + details: Generate query keys and functions. Use them with our REST clients or bring your own. 47 47 link: /openapi-ts/tanstack-query 48 48 linkText: Find out more 49 49 ---

+3 -3

docs/openapi-ts/clients/axios.md

··· 45 45 46 46 Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Axios client package. 47 47 48 48 - ```js{2} 48 48 + ```js 49 49 export default { 50 50 - client: '@hey-api/client-axios', 50 50 + client: '@hey-api/client-axios', // [!code ++] 51 51 input: 'path/to/openapi.json', 52 52 output: 'src/client', 53 53 - } 53 53 + }; 54 54 ``` 55 55 56 56 You can now run `openapi-ts` to use the new Axios client. 🎉

+3 -3

docs/openapi-ts/clients/fetch.md

··· 45 45 46 46 Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Fetch API client package. 47 47 48 48 - ```js{2} 48 48 + ```js 49 49 export default { 50 50 - client: '@hey-api/client-fetch', 50 50 + client: '@hey-api/client-fetch', // [!code ++] 51 51 input: 'path/to/openapi.json', 52 52 output: 'src/client', 53 53 - } 53 53 + }; 54 54 ``` 55 55 56 56 You can now run `openapi-ts` to use the new Fetch API client. 🎉

+15 -15

docs/openapi-ts/clients/legacy.md

··· 13 13 14 14 ::: code-group 15 15 16 16 - ```js{2} [fetch] 16 16 + ```js [fetch] 17 17 export default { 18 18 - client: 'fetch', 18 18 + client: 'fetch', // [!code ++] 19 19 input: 'path/to/openapi.json', 20 20 output: 'src/client', 21 21 - } 21 21 + }; 22 22 ``` 23 23 24 24 - ```js{2} [axios] 24 24 + ```js [axios] 25 25 export default { 26 26 - client: 'axios', 26 26 + client: 'axios', // [!code ++] 27 27 input: 'path/to/openapi.json', 28 28 output: 'src/client', 29 29 - } 29 29 + }; 30 30 ``` 31 31 32 32 - ```js{2} [angular] 32 32 + ```js [angular] 33 33 export default { 34 34 - client: 'angular', 34 34 + client: 'angular', // [!code ++] 35 35 input: 'path/to/openapi.json', 36 36 output: 'src/client', 37 37 - } 37 37 + }; 38 38 ``` 39 39 40 40 - ```js{2} [node] 40 40 + ```js [node] 41 41 export default { 42 42 - client: 'node', 42 42 + client: 'node', // [!code ++] 43 43 input: 'path/to/openapi.json', 44 44 output: 'src/client', 45 45 - } 45 45 + }; 46 46 ``` 47 47 48 48 - ```js{2} [xhr] 48 48 + ```js [xhr] 49 49 export default { 50 50 - client: 'xhr', 50 50 + client: 'xhr', // [!code ++] 51 51 input: 'path/to/openapi.json', 52 52 output: 'src/client', 53 53 - } 53 53 + }; 54 54 ``` 55 55 56 56 :::

+36 -36

docs/openapi-ts/configuration.md

··· 84 84 85 85 ::: code-group 86 86 87 87 - ```js{6} [disabled] 87 87 + ```js [disabled] 88 88 export default { 89 89 client: '@hey-api/client-fetch', 90 90 input: 'path/to/openapi.json', 91 91 output: 'src/client', 92 92 types: { 93 93 - enums: false, 93 93 + enums: false, // [!code ++] 94 94 }, 95 95 - } 95 95 + }; 96 96 ``` 97 97 98 98 - ```js{6} [javascript] 98 98 + ```js [javascript] 99 99 export default { 100 100 client: '@hey-api/client-fetch', 101 101 input: 'path/to/openapi.json', 102 102 output: 'src/client', 103 103 types: { 104 104 - enums: 'javascript', 104 104 + enums: 'javascript', // [!code ++] 105 105 }, 106 106 - } 106 106 + }; 107 107 ``` 108 108 109 109 - ```js{6} [typescript] 109 109 + ```js [typescript] 110 110 export default { 111 111 client: '@hey-api/client-fetch', 112 112 input: 'path/to/openapi.json', 113 113 output: 'src/client', 114 114 types: { 115 115 - enums: 'typescript', 115 115 + enums: 'typescript', // [!code ++] 116 116 }, 117 117 - } 117 117 + }; 118 118 ``` 119 119 120 120 ::: ··· 127 127 128 128 ::: code-group 129 129 130 130 - ```js{6} [json] 130 130 + ```js [json] 131 131 export default { 132 132 client: '@hey-api/client-fetch', 133 133 input: 'path/to/openapi.json', 134 134 output: 'src/client', 135 135 schemas: { 136 136 - type: 'json' 136 136 + type: 'json', // [!code ++] 137 137 }, 138 138 - } 138 138 + }; 139 139 ``` 140 140 141 141 - ```js{6} [form] 141 141 + ```js [form] 142 142 export default { 143 143 client: '@hey-api/client-fetch', 144 144 input: 'path/to/openapi.json', 145 145 output: 'src/client', 146 146 schemas: { 147 147 - type: 'form' 147 147 + type: 'form', // [!code ++] 148 148 }, 149 149 - } 149 149 + }; 150 150 ``` 151 151 152 152 - ```js{5} [disabled] 152 152 + ```js [disabled] 153 153 export default { 154 154 client: '@hey-api/client-fetch', 155 155 input: 'path/to/openapi.json', 156 156 output: 'src/client', 157 157 - schemas: false, 158 158 - } 157 157 + schemas: false, // [!code ++] 158 158 + }; 159 159 ``` 160 160 161 161 ::: ··· 166 166 167 167 ::: code-group 168 168 169 169 - ```js{5} [disabled] 169 169 + ```js [disabled] 170 170 export default { 171 171 client: '@hey-api/client-fetch', 172 172 input: 'path/to/openapi.json', 173 173 output: { 174 174 - format: false, 174 174 + format: false, // [!code ++] 175 175 path: 'src/client', 176 176 }, 177 177 - } 177 177 + }; 178 178 ``` 179 179 180 180 - ```js{5} [prettier] 180 180 + ```js [prettier] 181 181 export default { 182 182 client: '@hey-api/client-fetch', 183 183 input: 'path/to/openapi.json', 184 184 output: { 185 185 - format: 'prettier', 185 185 + format: 'prettier', // [!code ++] 186 186 path: 'src/client', 187 187 }, 188 188 - } 188 188 + }; 189 189 ``` 190 190 191 191 - ```js{5} [biome] 191 191 + ```js [biome] 192 192 export default { 193 193 client: '@hey-api/client-fetch', 194 194 input: 'path/to/openapi.json', 195 195 output: { 196 196 - format: 'biome', 196 196 + format: 'biome', // [!code ++] 197 197 path: 'src/client', 198 198 }, 199 199 - } 199 199 + }; 200 200 ``` 201 201 202 202 ::: ··· 209 209 210 210 ::: code-group 211 211 212 212 - ```js{5} [disabled] 212 212 + ```js [disabled] 213 213 export default { 214 214 client: '@hey-api/client-fetch', 215 215 input: 'path/to/openapi.json', 216 216 output: { 217 217 - lint: false, 217 217 + lint: false, // [!code ++] 218 218 path: 'src/client', 219 219 }, 220 220 - } 220 220 + }; 221 221 ``` 222 222 223 223 - ```js{5} [eslint] 223 223 + ```js [eslint] 224 224 export default { 225 225 client: '@hey-api/client-fetch', 226 226 input: 'path/to/openapi.json', 227 227 output: { 228 228 - lint: 'eslint', 228 228 + lint: 'eslint', // [!code ++] 229 229 path: 'src/client', 230 230 }, 231 231 - } 231 231 + }; 232 232 ``` 233 233 234 234 - ```js{5} [biome] 234 234 + ```js [biome] 235 235 export default { 236 236 client: '@hey-api/client-fetch', 237 237 input: 'path/to/openapi.json', 238 238 output: { 239 239 - lint: 'biome', 239 239 + lint: 'biome', // [!code ++] 240 240 path: 'src/client', 241 241 }, 242 242 - } 242 242 + }; 243 243 ``` 244 244 245 245 :::

+21 -18

docs/openapi-ts/migrating.md

··· 86 86 87 87 Client now has to be explicitly specified and `@hey-api/openapi-ts` will no longer generate a legacy Fetch API client by default. To preserve the previous default behavior, set the `client` option to `fetch`. 88 88 89 89 - ```js{2} 89 89 + ```js 90 90 export default { 91 91 - client: 'fetch', 91 91 + client: 'fetch', // [!code ++] 92 92 input: 'path/to/openapi.json', 93 93 output: 'src/client', 94 94 - } 94 94 + }; 95 95 ``` 96 96 97 97 ## v0.48.0 ··· 137 137 138 138 If you want to preserve the old behavior, you can set the newly exposed `services.asClass` option to `true.` 139 139 140 140 - ```js{5} 140 140 + ```js 141 141 export default { 142 142 input: 'path/to/openapi.json', 143 143 output: 'src/client', 144 144 services: { 145 145 - asClass: true, 145 145 + asClass: true, // [!code ++] 146 146 }, 147 147 - } 147 147 + }; 148 148 ``` 149 149 150 150 ## v0.45.0 ··· 153 153 154 154 `@hey-api/openapi-ts` will no longer infer which client you want to generate. By default, we will create a `fetch` client. If you want a different client, you can specify it using the `client` option. 155 155 156 156 - ```js{2} 156 156 + ```js 157 157 export default { 158 158 - client: 'axios', 158 158 + client: 'axios', // [!code ++] 159 159 input: 'path/to/openapi.json', 160 160 output: 'src/client', 161 161 - } 161 161 + }; 162 162 ``` 163 163 164 164 ## v0.44.0 ··· 167 167 168 168 This config option has been moved. You can now configure formatter using the `output.format` option. 169 169 170 170 - ```js{4} 170 170 + ```js 171 171 export default { 172 172 + format: 'prettier', // [!code --] 172 173 input: 'path/to/openapi.json', 173 174 output: { 174 174 - format: 'prettier', 175 175 + format: 'prettier', // [!code ++] 175 176 path: 'src/client', 176 177 }, 177 177 - } 178 178 + }; 178 179 ``` 179 180 180 181 ### Moved `lint` 181 182 182 183 This config option has been moved. You can now configure linter using the `output.lint` option. 183 184 184 184 - ```js{4} 185 185 + ```js 185 186 export default { 186 187 input: 'path/to/openapi.json', 188 188 + lint: 'eslint', // [!code --] 187 189 output: { 188 188 - lint: 'eslint', 190 190 + lint: 'eslint', // [!code ++] 189 191 path: 'src/client', 190 192 }, 191 191 - } 193 193 + }; 192 194 ``` 193 195 194 196 ## v0.43.0 ··· 226 228 227 229 This config option has been moved. You can now configure enums using the `types.enums` option. 228 230 229 229 - ```js{5} 231 231 + ```js 230 232 export default { 233 233 + enums: 'javascript', // [!code --] 231 234 input: 'path/to/openapi.json', 232 235 output: 'src/client', 233 236 types: { 234 234 - enums: 'javascript', 237 237 + enums: 'javascript', // [!code ++] 235 238 }, 236 236 - } 239 239 + }; 237 240 ``` 238 241 239 242 ## v0.42.0

+13 -13

docs/openapi-ts/output.md

··· 86 86 87 87 ::: code-group 88 88 89 89 - ```js{5} [flat] 89 89 + ```js [flat] 90 90 export default { 91 91 input: 'path/to/openapi.json', 92 92 output: 'src/client', 93 93 services: { 94 94 - asClass: false, 94 94 + asClass: false, // [!code ++] 95 95 }, 96 96 - } 96 96 + }; 97 97 ``` 98 98 99 99 - ```js{5} [class] 99 99 + ```js [class] 100 100 export default { 101 101 input: 'path/to/openapi.json', 102 102 output: 'src/client', 103 103 services: { 104 104 - asClass: true, 104 104 + asClass: true, // [!code ++] 105 105 }, 106 106 - } 106 106 + }; 107 107 ``` 108 108 109 109 - ```js{4} [none] 109 109 + ```js [none] 110 110 export default { 111 111 input: 'path/to/openapi.json', 112 112 output: 'src/client', 113 113 - services: false, 114 114 - } 113 113 + services: false, // [!code ++] 114 114 + }; 115 115 ``` 116 116 117 117 ::: ··· 120 120 121 121 If you only want to include specific endpoints in the generated services, you can use the `services.filter` config option to filter endpoints. The provided value should be a regular expression to match against endpoints with the `{method} {path}` pattern. For example, the config below will only include all `/api/v1/foo` endpoints. 122 122 123 123 - ```js{5} 123 123 + ```js 124 124 export default { 125 125 input: 'path/to/openapi.json', 126 126 output: 'src/client', 127 127 services: { 128 128 - filter: '^\\w+ /api/v1/foo$' 129 129 - } 130 130 - } 128 128 + filter: '^\\w+ /api/v1/foo$', // [!code ++] 129 129 + }, 130 130 + }; 131 131 ``` 132 132 133 133 ### Output

+114 -4

docs/openapi-ts/tanstack-query.md

··· 1 1 --- 2 2 title: TanStack Query 3 3 - description: Generate query keys and query functions. Use them with our REST clients or bring your own. 3 3 + description: Generate query keys and functions. Use them with our REST clients or bring your own. 4 4 --- 5 5 6 6 - # TanStack Query <span class="soon">Soon</span> 6 6 + <script setup> 7 7 + import { embedProject } from '../embed' 8 8 + </script> 9 9 + 10 10 + # TanStack Query 11 11 + 12 12 + ::: warning 13 13 + TanStack Query plugin is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues). 14 14 + ::: 15 15 + 16 16 + [TanStack Query](https://tanstack.com/query) is one of the most popular state management solutions. Hey API can generate query keys and functions for you, so you can focus on building your product. Everything is compatible with our REST clients, but you can bring your own too. 17 17 + 18 18 + <button class="buttonLink" @click="(event) => embedProject('hey-api-client-fetch-plugin-tanstack-react-query-example')(event)"> 19 19 + Live demo 20 20 + </button> 21 21 + 22 22 + ## Installation 23 23 + 24 24 + Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the TanStack Query plugin. 25 25 + 26 26 + ::: code-group 27 27 + 28 28 + ```js{5} [react] 29 29 + export default { 30 30 + client: '@hey-api/client-fetch', 31 31 + input: 'path/to/openapi.json', 32 32 + output: 'src/client', 33 33 + plugins: ['@tanstack/react-query'], // [!code ++] 34 34 + } 35 35 + ``` 7 36 8 8 - [TanStack Query](https://tanstack.com/query) is one of the most popular state management solutions. Hey API can generate query keys and query functions for you, so you can focus on building your product. Everything is compatible with our REST clients, but you can bring your own too. 37 37 + ```js{5} [vue] 38 38 + export default { 39 39 + client: '@hey-api/client-fetch', 40 40 + input: 'path/to/openapi.json', 41 41 + output: 'src/client', 42 42 + plugins: ['@tanstack/vue-query'], // [!code ++] 43 43 + } 44 44 + ``` 9 45 10 10 - You can follow the updates on [GitHub](https://github.com/hey-api/openapi-ts/issues/653), your feedback is welcome! 46 46 + ```js{5} [solid] 47 47 + export default { 48 48 + client: '@hey-api/client-fetch', 49 49 + input: 'path/to/openapi.json', 50 50 + output: 'src/client', 51 51 + plugins: ['@tanstack/solid-query'], // [!code ++] 52 52 + } 53 53 + ``` 11 54 55 55 + ```js{5} [svelte] 56 56 + export default { 57 57 + client: '@hey-api/client-fetch', 58 58 + input: 'path/to/openapi.json', 59 59 + output: 'src/client', 60 60 + plugins: ['@tanstack/svelte-query'], // [!code ++] 61 61 + } 62 62 + ``` 63 63 + 64 64 + ::: 65 65 + 66 66 + You can now run `openapi-ts` to generate TanStack Query artifacts. 🎉 67 67 + 68 68 + ## Output 69 69 + 70 70 + The TanStack Query plugin will optionally generate the following output layers, depending on the input specification. 71 71 + 72 72 + ### Queries 73 73 + 74 74 + Queries are generated from GET and POST endpoints. The generated functions follow the naming convention of services and append `Options`, e.g. `getPetByIdOptions()`. 75 75 + 76 76 + ```ts 77 77 + const { data, error } = useQuery({ 78 78 + ...getPetByIdOptions({ 79 79 + path: { 80 80 + petId: 1, 81 81 + }, 82 82 + }), 83 83 + }); 84 84 + ``` 85 85 + 86 86 + ### Infinite Queries 87 87 + 88 88 + Infinite queries are generated from GET and POST endpoints if we detect a pagination parameter. The generated functions follow the naming convention of services and append `InfiniteOptions`, e.g. `getFooInfiniteOptions()`. 89 89 + 90 90 + ```ts 91 91 + const { data, error } = useInfiniteQuery({ 92 92 + ...getFooInfiniteOptions({ 93 93 + path: { 94 94 + fooId: 1, 95 95 + }, 96 96 + }), 97 97 + getNextPageParam: (lastPage, pages) => lastPage.nextCursor, 98 98 + initialPageParam: 0, 99 99 + }); 100 100 + ``` 101 101 + 102 102 + ### Mutations 103 103 + 104 104 + Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated functions follow the naming convention of services and append `Mutation`, e.g. `addPetMutation()`. 105 105 + 106 106 + ```ts 107 107 + const addPet = useMutation({ 108 108 + ...addPetMutation(), 109 109 + onError: (error) => { 110 110 + console.log(error); 111 111 + }, 112 112 + }); 113 113 + 114 114 + addPet.mutate({ 115 115 + body: { 116 116 + name: 'Kitty', 117 117 + }, 118 118 + }); 119 119 + ``` 120 120 + 121 121 + <!--@include: ../examples.md--> 12 122 <!--@include: ../sponsorship.md-->

+3 -3

docs/openapi-ts/transformers.md

··· 31 31 32 32 To automatically convert date strings into `Date` objects, you can use the `types.dates` configuration option. 33 33 34 34 - ```js{6} 34 34 + ```js 35 35 export default { 36 36 client: '@hey-api/client-fetch', 37 37 input: 'path/to/openapi.json', 38 38 output: 'src/client', 39 39 types: { 40 40 - dates: 'types+transform', 40 40 + dates: 'types+transform', // [!code ++] 41 41 }, 42 42 - } 42 42 + }; 43 43 ``` 44 44 45 45 This will generate types that use `Date` instead of `string` and appropriate response transformers. Note that 3rd party date packages are not supported at the moment.

+2 -2

examples/openapi-ts-tanstack-react-query/src/App.tsx

··· 59 59 const [isRequiredNameError, setIsRequiredNameError] = useState(false); 60 60 61 61 const addPet = useMutation({ 62 62 - ...addPetMutation, 62 62 + ...addPetMutation(), 63 63 onError: (error) => { 64 64 console.log(error); 65 65 setIsRequiredNameError(false); ··· 71 71 }); 72 72 73 73 const updatePet = useMutation({ 74 74 - ...updatePetMutation, 74 74 + ...updatePetMutation(), 75 75 onError: (error) => { 76 76 console.log(error); 77 77 },

+208 -238

examples/openapi-ts-tanstack-react-query/src/client/@tanstack/react-query.gen.ts

··· 9 9 10 10 import { 11 11 addPet, 12 12 + client, 12 13 createUser, 13 14 createUsersWithListInput, 14 15 deleteOrder, ··· 63 64 } from '../types.gen'; 64 65 65 66 type QueryKey<TOptions extends Options> = [ 66 66 - { 67 67 - infinite?: boolean; 68 68 - params: Pick<TOptions, 'body' | 'headers' | 'path' | 'query'>; 69 69 - scope: string; 67 67 + Pick<TOptions, 'baseUrl' | 'body' | 'headers' | 'path' | 'query'> & { 68 68 + _id: string; 69 69 + _infinite?: boolean; 70 70 }, 71 71 ]; 72 72 73 73 - const createQueryKeyParams = <TOptions extends Options>( 73 73 + const createQueryKey = <TOptions extends Options>( 74 74 + id: string, 74 75 options?: TOptions, 75 75 - ): QueryKey<TOptions>[0]['params'] => { 76 76 - const params: QueryKey<TOptions>[0]['params'] = 77 77 - {} as QueryKey<TOptions>[0]['params']; 76 76 + infinite?: boolean, 77 77 + ): QueryKey<TOptions>[0] => { 78 78 + const params: QueryKey<TOptions>[0] = { 79 79 + _id: id, 80 80 + baseUrl: client.getConfig().baseUrl, 81 81 + } as QueryKey<TOptions>[0]; 82 82 + if (infinite) { 83 83 + params._infinite = infinite; 84 84 + } 78 85 if (options?.body) { 79 86 params.body = options.body; 80 87 } ··· 95 102 queryFn: async ({ queryKey }) => { 96 103 const { data } = await addPet({ 97 104 ...options, 98 98 - ...queryKey[0].params, 105 105 + ...queryKey[0], 99 106 throwOnError: true, 100 107 }); 101 108 return data; 102 109 }, 103 103 - queryKey: [ 104 104 - { 105 105 - params: createQueryKeyParams(options), 106 106 - scope: 'addPet', 107 107 - }, 108 108 - ], 110 110 + queryKey: [createQueryKey('addPet', options)], 109 111 }); 110 112 111 111 - export const addPetMutation: UseMutationOptions< 112 112 - AddPetResponse, 113 113 - AddPetError, 114 114 - Options<AddPetData> 115 115 - > = { 116 116 - mutationFn: async (options) => { 117 117 - const { data } = await addPet({ 118 118 - ...options, 119 119 - throwOnError: true, 120 120 - }); 121 121 - return data; 122 122 - }, 113 113 + export const addPetMutation = () => { 114 114 + const mutationOptions: UseMutationOptions< 115 115 + AddPetResponse, 116 116 + AddPetError, 117 117 + Options<AddPetData> 118 118 + > = { 119 119 + mutationFn: async (options) => { 120 120 + const { data } = await addPet({ 121 121 + ...options, 122 122 + throwOnError: true, 123 123 + }); 124 124 + return data; 125 125 + }, 126 126 + }; 127 127 + return mutationOptions; 123 128 }; 124 129 125 125 - export const updatePetMutation: UseMutationOptions< 126 126 - UpdatePetResponse, 127 127 - UpdatePetError, 128 128 - Options<UpdatePetData> 129 129 - > = { 130 130 - mutationFn: async (options) => { 131 131 - const { data } = await updatePet({ 132 132 - ...options, 133 133 - throwOnError: true, 134 134 - }); 135 135 - return data; 136 136 - }, 130 130 + export const updatePetMutation = () => { 131 131 + const mutationOptions: UseMutationOptions< 132 132 + UpdatePetResponse, 133 133 + UpdatePetError, 134 134 + Options<UpdatePetData> 135 135 + > = { 136 136 + mutationFn: async (options) => { 137 137 + const { data } = await updatePet({ 138 138 + ...options, 139 139 + throwOnError: true, 140 140 + }); 141 141 + return data; 142 142 + }, 143 143 + }; 144 144 + return mutationOptions; 137 145 }; 138 146 139 147 export const findPetsByStatusOptions = ( ··· 143 151 queryFn: async ({ queryKey }) => { 144 152 const { data } = await findPetsByStatus({ 145 153 ...options, 146 146 - ...queryKey[0].params, 154 154 + ...queryKey[0], 147 155 throwOnError: true, 148 156 }); 149 157 return data; 150 158 }, 151 151 - queryKey: [ 152 152 - { 153 153 - params: createQueryKeyParams(options), 154 154 - scope: 'findPetsByStatus', 155 155 - }, 156 156 - ], 159 159 + queryKey: [createQueryKey('findPetsByStatus', options)], 157 160 }); 158 161 159 162 export const findPetsByTagsOptions = (options?: Options<FindPetsByTagsData>) => ··· 161 164 queryFn: async ({ queryKey }) => { 162 165 const { data } = await findPetsByTags({ 163 166 ...options, 164 164 - ...queryKey[0].params, 167 167 + ...queryKey[0], 165 168 throwOnError: true, 166 169 }); 167 170 return data; 168 171 }, 169 169 - queryKey: [ 170 170 - { 171 171 - params: createQueryKeyParams(options), 172 172 - scope: 'findPetsByTags', 173 173 - }, 174 174 - ], 172 172 + queryKey: [createQueryKey('findPetsByTags', options)], 175 173 }); 176 174 177 175 export const getPetByIdOptions = (options: Options<GetPetByIdData>) => ··· 179 177 queryFn: async ({ queryKey }) => { 180 178 const { data } = await getPetById({ 181 179 ...options, 182 182 - ...queryKey[0].params, 180 180 + ...queryKey[0], 183 181 throwOnError: true, 184 182 }); 185 183 return data; 186 184 }, 187 187 - queryKey: [ 188 188 - { 189 189 - params: createQueryKeyParams(options), 190 190 - scope: 'getPetById', 191 191 - }, 192 192 - ], 185 185 + queryKey: [createQueryKey('getPetById', options)], 193 186 }); 194 187 195 188 export const updatePetWithFormOptions = ( ··· 199 192 queryFn: async ({ queryKey }) => { 200 193 const { data } = await updatePetWithForm({ 201 194 ...options, 202 202 - ...queryKey[0].params, 195 195 + ...queryKey[0], 203 196 throwOnError: true, 204 197 }); 205 198 return data; 206 199 }, 207 207 - queryKey: [ 208 208 - { 209 209 - params: createQueryKeyParams(options), 210 210 - scope: 'updatePetWithForm', 211 211 - }, 212 212 - ], 200 200 + queryKey: [createQueryKey('updatePetWithForm', options)], 213 201 }); 214 202 215 215 - export const updatePetWithFormMutation: UseMutationOptions< 216 216 - void, 217 217 - DefaultError, 218 218 - Options<UpdatePetWithFormData> 219 219 - > = { 220 220 - mutationFn: async (options) => { 221 221 - const { data } = await updatePetWithForm({ 222 222 - ...options, 223 223 - throwOnError: true, 224 224 - }); 225 225 - return data; 226 226 - }, 203 203 + export const updatePetWithFormMutation = () => { 204 204 + const mutationOptions: UseMutationOptions< 205 205 + void, 206 206 + DefaultError, 207 207 + Options<UpdatePetWithFormData> 208 208 + > = { 209 209 + mutationFn: async (options) => { 210 210 + const { data } = await updatePetWithForm({ 211 211 + ...options, 212 212 + throwOnError: true, 213 213 + }); 214 214 + return data; 215 215 + }, 216 216 + }; 217 217 + return mutationOptions; 227 218 }; 228 219 229 229 - export const deletePetMutation: UseMutationOptions< 230 230 - void, 231 231 - DefaultError, 232 232 - Options<DeletePetData> 233 233 - > = { 234 234 - mutationFn: async (options) => { 235 235 - const { data } = await deletePet({ 236 236 - ...options, 237 237 - throwOnError: true, 238 238 - }); 239 239 - return data; 240 240 - }, 220 220 + export const deletePetMutation = () => { 221 221 + const mutationOptions: UseMutationOptions< 222 222 + void, 223 223 + DefaultError, 224 224 + Options<DeletePetData> 225 225 + > = { 226 226 + mutationFn: async (options) => { 227 227 + const { data } = await deletePet({ 228 228 + ...options, 229 229 + throwOnError: true, 230 230 + }); 231 231 + return data; 232 232 + }, 233 233 + }; 234 234 + return mutationOptions; 241 235 }; 242 236 243 237 export const uploadFileOptions = (options: Options<UploadFileData>) => ··· 245 239 queryFn: async ({ queryKey }) => { 246 240 const { data } = await uploadFile({ 247 241 ...options, 248 248 - ...queryKey[0].params, 242 242 + ...queryKey[0], 249 243 throwOnError: true, 250 244 }); 251 245 return data; 252 246 }, 253 253 - queryKey: [ 254 254 - { 255 255 - params: createQueryKeyParams(options), 256 256 - scope: 'uploadFile', 257 257 - }, 258 258 - ], 247 247 + queryKey: [createQueryKey('uploadFile', options)], 259 248 }); 260 249 261 261 - export const uploadFileMutation: UseMutationOptions< 262 262 - UploadFileResponse, 263 263 - UploadFileError, 264 264 - Options<UploadFileData> 265 265 - > = { 266 266 - mutationFn: async (options) => { 267 267 - const { data } = await uploadFile({ 268 268 - ...options, 269 269 - throwOnError: true, 270 270 - }); 271 271 - return data; 272 272 - }, 250 250 + export const uploadFileMutation = () => { 251 251 + const mutationOptions: UseMutationOptions< 252 252 + UploadFileResponse, 253 253 + UploadFileError, 254 254 + Options<UploadFileData> 255 255 + > = { 256 256 + mutationFn: async (options) => { 257 257 + const { data } = await uploadFile({ 258 258 + ...options, 259 259 + throwOnError: true, 260 260 + }); 261 261 + return data; 262 262 + }, 263 263 + }; 264 264 + return mutationOptions; 273 265 }; 274 266 275 267 export const getInventoryOptions = (options?: Options) => ··· 277 269 queryFn: async ({ queryKey }) => { 278 270 const { data } = await getInventory({ 279 271 ...options, 280 280 - ...queryKey[0].params, 272 272 + ...queryKey[0], 281 273 throwOnError: true, 282 274 }); 283 275 return data; 284 276 }, 285 285 - queryKey: [ 286 286 - { 287 287 - params: createQueryKeyParams(options), 288 288 - scope: 'getInventory', 289 289 - }, 290 290 - ], 277 277 + queryKey: [createQueryKey('getInventory', options)], 291 278 }); 292 279 293 280 export const placeOrderOptions = (options?: Options<PlaceOrderData>) => ··· 295 282 queryFn: async ({ queryKey }) => { 296 283 const { data } = await placeOrder({ 297 284 ...options, 298 298 - ...queryKey[0].params, 285 285 + ...queryKey[0], 299 286 throwOnError: true, 300 287 }); 301 288 return data; 302 289 }, 303 303 - queryKey: [ 304 304 - { 305 305 - params: createQueryKeyParams(options), 306 306 - scope: 'placeOrder', 307 307 - }, 308 308 - ], 290 290 + queryKey: [createQueryKey('placeOrder', options)], 309 291 }); 310 292 311 311 - export const placeOrderMutation: UseMutationOptions< 312 312 - PlaceOrderResponse, 313 313 - PlaceOrderError, 314 314 - Options<PlaceOrderData> 315 315 - > = { 316 316 - mutationFn: async (options) => { 317 317 - const { data } = await placeOrder({ 318 318 - ...options, 319 319 - throwOnError: true, 320 320 - }); 321 321 - return data; 322 322 - }, 293 293 + export const placeOrderMutation = () => { 294 294 + const mutationOptions: UseMutationOptions< 295 295 + PlaceOrderResponse, 296 296 + PlaceOrderError, 297 297 + Options<PlaceOrderData> 298 298 + > = { 299 299 + mutationFn: async (options) => { 300 300 + const { data } = await placeOrder({ 301 301 + ...options, 302 302 + throwOnError: true, 303 303 + }); 304 304 + return data; 305 305 + }, 306 306 + }; 307 307 + return mutationOptions; 323 308 }; 324 309 325 310 export const getOrderByIdOptions = (options: Options<GetOrderByIdData>) => ··· 327 312 queryFn: async ({ queryKey }) => { 328 313 const { data } = await getOrderById({ 329 314 ...options, 330 330 - ...queryKey[0].params, 315 315 + ...queryKey[0], 331 316 throwOnError: true, 332 317 }); 333 318 return data; 334 319 }, 335 335 - queryKey: [ 336 336 - { 337 337 - params: createQueryKeyParams(options), 338 338 - scope: 'getOrderById', 339 339 - }, 340 340 - ], 320 320 + queryKey: [createQueryKey('getOrderById', options)], 341 321 }); 342 322 343 343 - export const deleteOrderMutation: UseMutationOptions< 344 344 - void, 345 345 - DefaultError, 346 346 - Options<DeleteOrderData> 347 347 - > = { 348 348 - mutationFn: async (options) => { 349 349 - const { data } = await deleteOrder({ 350 350 - ...options, 351 351 - throwOnError: true, 352 352 - }); 353 353 - return data; 354 354 - }, 323 323 + export const deleteOrderMutation = () => { 324 324 + const mutationOptions: UseMutationOptions< 325 325 + void, 326 326 + DefaultError, 327 327 + Options<DeleteOrderData> 328 328 + > = { 329 329 + mutationFn: async (options) => { 330 330 + const { data } = await deleteOrder({ 331 331 + ...options, 332 332 + throwOnError: true, 333 333 + }); 334 334 + return data; 335 335 + }, 336 336 + }; 337 337 + return mutationOptions; 355 338 }; 356 339 357 340 export const createUserOptions = (options?: Options<CreateUserData>) => ··· 359 342 queryFn: async ({ queryKey }) => { 360 343 const { data } = await createUser({ 361 344 ...options, 362 362 - ...queryKey[0].params, 345 345 + ...queryKey[0], 363 346 throwOnError: true, 364 347 }); 365 348 return data; 366 349 }, 367 367 - queryKey: [ 368 368 - { 369 369 - params: createQueryKeyParams(options), 370 370 - scope: 'createUser', 371 371 - }, 372 372 - ], 350 350 + queryKey: [createQueryKey('createUser', options)], 373 351 }); 374 352 375 375 - export const createUserMutation: UseMutationOptions< 376 376 - CreateUserResponse, 377 377 - CreateUserError, 378 378 - Options<CreateUserData> 379 379 - > = { 380 380 - mutationFn: async (options) => { 381 381 - const { data } = await createUser({ 382 382 - ...options, 383 383 - throwOnError: true, 384 384 - }); 385 385 - return data; 386 386 - }, 353 353 + export const createUserMutation = () => { 354 354 + const mutationOptions: UseMutationOptions< 355 355 + CreateUserResponse, 356 356 + CreateUserError, 357 357 + Options<CreateUserData> 358 358 + > = { 359 359 + mutationFn: async (options) => { 360 360 + const { data } = await createUser({ 361 361 + ...options, 362 362 + throwOnError: true, 363 363 + }); 364 364 + return data; 365 365 + }, 366 366 + }; 367 367 + return mutationOptions; 387 368 }; 388 369 389 370 export const createUsersWithListInputOptions = ( ··· 393 374 queryFn: async ({ queryKey }) => { 394 375 const { data } = await createUsersWithListInput({ 395 376 ...options, 396 396 - ...queryKey[0].params, 377 377 + ...queryKey[0], 397 378 throwOnError: true, 398 379 }); 399 380 return data; 400 381 }, 401 401 - queryKey: [ 402 402 - { 403 403 - params: createQueryKeyParams(options), 404 404 - scope: 'createUsersWithListInput', 405 405 - }, 406 406 - ], 382 382 + queryKey: [createQueryKey('createUsersWithListInput', options)], 407 383 }); 408 384 409 409 - export const createUsersWithListInputMutation: UseMutationOptions< 410 410 - CreateUsersWithListInputResponse, 411 411 - CreateUsersWithListInputError, 412 412 - Options<CreateUsersWithListInputData> 413 413 - > = { 414 414 - mutationFn: async (options) => { 415 415 - const { data } = await createUsersWithListInput({ 416 416 - ...options, 417 417 - throwOnError: true, 418 418 - }); 419 419 - return data; 420 420 - }, 385 385 + export const createUsersWithListInputMutation = () => { 386 386 + const mutationOptions: UseMutationOptions< 387 387 + CreateUsersWithListInputResponse, 388 388 + CreateUsersWithListInputError, 389 389 + Options<CreateUsersWithListInputData> 390 390 + > = { 391 391 + mutationFn: async (options) => { 392 392 + const { data } = await createUsersWithListInput({ 393 393 + ...options, 394 394 + throwOnError: true, 395 395 + }); 396 396 + return data; 397 397 + }, 398 398 + }; 399 399 + return mutationOptions; 421 400 }; 422 401 423 402 export const loginUserOptions = (options?: Options<LoginUserData>) => ··· 425 404 queryFn: async ({ queryKey }) => { 426 405 const { data } = await loginUser({ 427 406 ...options, 428 428 - ...queryKey[0].params, 407 407 + ...queryKey[0], 429 408 throwOnError: true, 430 409 }); 431 410 return data; 432 411 }, 433 433 - queryKey: [ 434 434 - { 435 435 - params: createQueryKeyParams(options), 436 436 - scope: 'loginUser', 437 437 - }, 438 438 - ], 412 412 + queryKey: [createQueryKey('loginUser', options)], 439 413 }); 440 414 441 415 export const logoutUserOptions = (options?: Options) => ··· 443 417 queryFn: async ({ queryKey }) => { 444 418 const { data } = await logoutUser({ 445 419 ...options, 446 446 - ...queryKey[0].params, 420 420 + ...queryKey[0], 447 421 throwOnError: true, 448 422 }); 449 423 return data; 450 424 }, 451 451 - queryKey: [ 452 452 - { 453 453 - params: createQueryKeyParams(options), 454 454 - scope: 'logoutUser', 455 455 - }, 456 456 - ], 425 425 + queryKey: [createQueryKey('logoutUser', options)], 457 426 }); 458 427 459 428 export const getUserByNameOptions = (options: Options<GetUserByNameData>) => ··· 461 430 queryFn: async ({ queryKey }) => { 462 431 const { data } = await getUserByName({ 463 432 ...options, 464 464 - ...queryKey[0].params, 433 433 + ...queryKey[0], 465 434 throwOnError: true, 466 435 }); 467 436 return data; 468 437 }, 469 469 - queryKey: [ 470 470 - { 471 471 - params: createQueryKeyParams(options), 472 472 - scope: 'getUserByName', 473 473 - }, 474 474 - ], 438 438 + queryKey: [createQueryKey('getUserByName', options)], 475 439 }); 476 440 477 477 - export const updateUserMutation: UseMutationOptions< 478 478 - UpdateUserResponse, 479 479 - UpdateUserError, 480 480 - Options<UpdateUserData> 481 481 - > = { 482 482 - mutationFn: async (options) => { 483 483 - const { data } = await updateUser({ 484 484 - ...options, 485 485 - throwOnError: true, 486 486 - }); 487 487 - return data; 488 488 - }, 441 441 + export const updateUserMutation = () => { 442 442 + const mutationOptions: UseMutationOptions< 443 443 + UpdateUserResponse, 444 444 + UpdateUserError, 445 445 + Options<UpdateUserData> 446 446 + > = { 447 447 + mutationFn: async (options) => { 448 448 + const { data } = await updateUser({ 449 449 + ...options, 450 450 + throwOnError: true, 451 451 + }); 452 452 + return data; 453 453 + }, 454 454 + }; 455 455 + return mutationOptions; 489 456 }; 490 457 491 491 - export const deleteUserMutation: UseMutationOptions< 492 492 - void, 493 493 - DefaultError, 494 494 - Options<DeleteUserData> 495 495 - > = { 496 496 - mutationFn: async (options) => { 497 497 - const { data } = await deleteUser({ 498 498 - ...options, 499 499 - throwOnError: true, 500 500 - }); 501 501 - return data; 502 502 - }, 458 458 + export const deleteUserMutation = () => { 459 459 + const mutationOptions: UseMutationOptions< 460 460 + void, 461 461 + DefaultError, 462 462 + Options<DeleteUserData> 463 463 + > = { 464 464 + mutationFn: async (options) => { 465 465 + const { data } = await deleteUser({ 466 466 + ...options, 467 467 + throwOnError: true, 468 468 + }); 469 469 + return data; 470 470 + }, 471 471 + }; 472 472 + return mutationOptions; 503 473 };

+208 -238

examples/openapi-ts-tanstack-svelte-query/src/client/@tanstack/svelte-query.gen.ts

··· 9 9 10 10 import { 11 11 addPet, 12 12 + client, 12 13 createUser, 13 14 createUsersWithListInput, 14 15 deleteOrder, ··· 63 64 } from '../types.gen'; 64 65 65 66 type QueryKey<TOptions extends Options> = [ 66 66 - { 67 67 - infinite?: boolean; 68 68 - params: Pick<TOptions, 'body' | 'headers' | 'path' | 'query'>; 69 69 - scope: string; 67 67 + Pick<TOptions, 'baseUrl' | 'body' | 'headers' | 'path' | 'query'> & { 68 68 + _id: string; 69 69 + _infinite?: boolean; 70 70 }, 71 71 ]; 72 72 73 73 - const createQueryKeyParams = <TOptions extends Options>( 73 73 + const createQueryKey = <TOptions extends Options>( 74 74 + id: string, 74 75 options?: TOptions, 75 75 - ): QueryKey<TOptions>[0]['params'] => { 76 76 - const params: QueryKey<TOptions>[0]['params'] = 77 77 - {} as QueryKey<TOptions>[0]['params']; 76 76 + infinite?: boolean, 77 77 + ): QueryKey<TOptions>[0] => { 78 78 + const params: QueryKey<TOptions>[0] = { 79 79 + _id: id, 80 80 + baseUrl: client.getConfig().baseUrl, 81 81 + } as QueryKey<TOptions>[0]; 82 82 + if (infinite) { 83 83 + params._infinite = infinite; 84 84 + } 78 85 if (options?.body) { 79 86 params.body = options.body; 80 87 } ··· 95 102 queryFn: async ({ queryKey }) => { 96 103 const { data } = await addPet({ 97 104 ...options, 98 98 - ...queryKey[0].params, 105 105 + ...queryKey[0], 99 106 throwOnError: true, 100 107 }); 101 108 return data; 102 109 }, 103 103 - queryKey: [ 104 104 - { 105 105 - params: createQueryKeyParams(options), 106 106 - scope: 'addPet', 107 107 - }, 108 108 - ], 110 110 + queryKey: [createQueryKey('addPet', options)], 109 111 }); 110 112 111 111 - export const addPetMutation: MutationOptions< 112 112 - AddPetResponse, 113 113 - AddPetError, 114 114 - Options<AddPetData> 115 115 - > = { 116 116 - mutationFn: async (options) => { 117 117 - const { data } = await addPet({ 118 118 - ...options, 119 119 - throwOnError: true, 120 120 - }); 121 121 - return data; 122 122 - }, 113 113 + export const addPetMutation = () => { 114 114 + const mutationOptions: MutationOptions< 115 115 + AddPetResponse, 116 116 + AddPetError, 117 117 + Options<AddPetData> 118 118 + > = { 119 119 + mutationFn: async (options) => { 120 120 + const { data } = await addPet({ 121 121 + ...options, 122 122 + throwOnError: true, 123 123 + }); 124 124 + return data; 125 125 + }, 126 126 + }; 127 127 + return mutationOptions; 123 128 }; 124 129 125 125 - export const updatePetMutation: MutationOptions< 126 126 - UpdatePetResponse, 127 127 - UpdatePetError, 128 128 - Options<UpdatePetData> 129 129 - > = { 130 130 - mutationFn: async (options) => { 131 131 - const { data } = await updatePet({ 132 132 - ...options, 133 133 - throwOnError: true, 134 134 - }); 135 135 - return data; 136 136 - }, 130 130 + export const updatePetMutation = () => { 131 131 + const mutationOptions: MutationOptions< 132 132 + UpdatePetResponse, 133 133 + UpdatePetError, 134 134 + Options<UpdatePetData> 135 135 + > = { 136 136 + mutationFn: async (options) => { 137 137 + const { data } = await updatePet({ 138 138 + ...options, 139 139 + throwOnError: true, 140 140 + }); 141 141 + return data; 142 142 + }, 143 143 + }; 144 144 + return mutationOptions; 137 145 }; 138 146 139 147 export const findPetsByStatusOptions = ( ··· 143 151 queryFn: async ({ queryKey }) => { 144 152 const { data } = await findPetsByStatus({ 145 153 ...options, 146 146 - ...queryKey[0].params, 154 154 + ...queryKey[0], 147 155 throwOnError: true, 148 156 }); 149 157 return data; 150 158 }, 151 151 - queryKey: [ 152 152 - { 153 153 - params: createQueryKeyParams(options), 154 154 - scope: 'findPetsByStatus', 155 155 - }, 156 156 - ], 159 159 + queryKey: [createQueryKey('findPetsByStatus', options)], 157 160 }); 158 161 159 162 export const findPetsByTagsOptions = (options?: Options<FindPetsByTagsData>) => ··· 161 164 queryFn: async ({ queryKey }) => { 162 165 const { data } = await findPetsByTags({ 163 166 ...options, 164 164 - ...queryKey[0].params, 167 167 + ...queryKey[0], 165 168 throwOnError: true, 166 169 }); 167 170 return data; 168 171 }, 169 169 - queryKey: [ 170 170 - { 171 171 - params: createQueryKeyParams(options), 172 172 - scope: 'findPetsByTags', 173 173 - }, 174 174 - ], 172 172 + queryKey: [createQueryKey('findPetsByTags', options)], 175 173 }); 176 174 177 175 export const getPetByIdOptions = (options: Options<GetPetByIdData>) => ··· 179 177 queryFn: async ({ queryKey }) => { 180 178 const { data } = await getPetById({ 181 179 ...options, 182 182 - ...queryKey[0].params, 180 180 + ...queryKey[0], 183 181 throwOnError: true, 184 182 }); 185 183 return data; 186 184 }, 187 187 - queryKey: [ 188 188 - { 189 189 - params: createQueryKeyParams(options), 190 190 - scope: 'getPetById', 191 191 - }, 192 192 - ], 185 185 + queryKey: [createQueryKey('getPetById', options)], 193 186 }); 194 187 195 188 export const updatePetWithFormOptions = ( ··· 199 192 queryFn: async ({ queryKey }) => { 200 193 const { data } = await updatePetWithForm({ 201 194 ...options, 202 202 - ...queryKey[0].params, 195 195 + ...queryKey[0], 203 196 throwOnError: true, 204 197 }); 205 198 return data; 206 199 }, 207 207 - queryKey: [ 208 208 - { 209 209 - params: createQueryKeyParams(options), 210 210 - scope: 'updatePetWithForm', 211 211 - }, 212 212 - ], 200 200 + queryKey: [createQueryKey('updatePetWithForm', options)], 213 201 }); 214 202 215 215 - export const updatePetWithFormMutation: MutationOptions< 216 216 - void, 217 217 - DefaultError, 218 218 - Options<UpdatePetWithFormData> 219 219 - > = { 220 220 - mutationFn: async (options) => { 221 221 - const { data } = await updatePetWithForm({ 222 222 - ...options, 223 223 - throwOnError: true, 224 224 - }); 225 225 - return data; 226 226 - }, 203 203 + export const updatePetWithFormMutation = () => { 204 204 + const mutationOptions: MutationOptions< 205 205 + void, 206 206 + DefaultError, 207 207 + Options<UpdatePetWithFormData> 208 208 + > = { 209 209 + mutationFn: async (options) => { 210 210 + const { data } = await updatePetWithForm({ 211 211 + ...options, 212 212 + throwOnError: true, 213 213 + }); 214 214 + return data; 215 215 + }, 216 216 + }; 217 217 + return mutationOptions; 227 218 }; 228 219 229 229 - export const deletePetMutation: MutationOptions< 230 230 - void, 231 231 - DefaultError, 232 232 - Options<DeletePetData> 233 233 - > = { 234 234 - mutationFn: async (options) => { 235 235 - const { data } = await deletePet({ 236 236 - ...options, 237 237 - throwOnError: true, 238 238 - }); 239 239 - return data; 240 240 - }, 220 220 + export const deletePetMutation = () => { 221 221 + const mutationOptions: MutationOptions< 222 222 + void, 223 223 + DefaultError, 224 224 + Options<DeletePetData> 225 225 + > = { 226 226 + mutationFn: async (options) => { 227 227 + const { data } = await deletePet({ 228 228 + ...options, 229 229 + throwOnError: true, 230 230 + }); 231 231 + return data; 232 232 + }, 233 233 + }; 234 234 + return mutationOptions; 241 235 }; 242 236 243 237 export const uploadFileOptions = (options: Options<UploadFileData>) => ··· 245 239 queryFn: async ({ queryKey }) => { 246 240 const { data } = await uploadFile({ 247 241 ...options, 248 248 - ...queryKey[0].params, 242 242 + ...queryKey[0], 249 243 throwOnError: true, 250 244 }); 251 245 return data; 252 246 }, 253 253 - queryKey: [ 254 254 - { 255 255 - params: createQueryKeyParams(options), 256 256 - scope: 'uploadFile', 257 257 - }, 258 258 - ], 247 247 + queryKey: [createQueryKey('uploadFile', options)], 259 248 }); 260 249 261 261 - export const uploadFileMutation: MutationOptions< 262 262 - UploadFileResponse, 263 263 - UploadFileError, 264 264 - Options<UploadFileData> 265 265 - > = { 266 266 - mutationFn: async (options) => { 267 267 - const { data } = await uploadFile({ 268 268 - ...options, 269 269 - throwOnError: true, 270 270 - }); 271 271 - return data; 272 272 - }, 250 250 + export const uploadFileMutation = () => { 251 251 + const mutationOptions: MutationOptions< 252 252 + UploadFileResponse, 253 253 + UploadFileError, 254 254 + Options<UploadFileData> 255 255 + > = { 256 256 + mutationFn: async (options) => { 257 257 + const { data } = await uploadFile({ 258 258 + ...options, 259 259 + throwOnError: true, 260 260 + }); 261 261 + return data; 262 262 + }, 263 263 + }; 264 264 + return mutationOptions; 273 265 }; 274 266 275 267 export const getInventoryOptions = (options?: Options) => ··· 277 269 queryFn: async ({ queryKey }) => { 278 270 const { data } = await getInventory({ 279 271 ...options, 280 280 - ...queryKey[0].params, 272 272 + ...queryKey[0], 281 273 throwOnError: true, 282 274 }); 283 275 return data; 284 276 }, 285 285 - queryKey: [ 286 286 - { 287 287 - params: createQueryKeyParams(options), 288 288 - scope: 'getInventory', 289 289 - }, 290 290 - ], 277 277 + queryKey: [createQueryKey('getInventory', options)], 291 278 }); 292 279 293 280 export const placeOrderOptions = (options?: Options<PlaceOrderData>) => ··· 295 282 queryFn: async ({ queryKey }) => { 296 283 const { data } = await placeOrder({ 297 284 ...options, 298 298 - ...queryKey[0].params, 285 285 + ...queryKey[0], 299 286 throwOnError: true, 300 287 }); 301 288 return data; 302 289 }, 303 303 - queryKey: [ 304 304 - { 305 305 - params: createQueryKeyParams(options), 306 306 - scope: 'placeOrder', 307 307 - }, 308 308 - ], 290 290 + queryKey: [createQueryKey('placeOrder', options)], 309 291 }); 310 292 311 311 - export const placeOrderMutation: MutationOptions< 312 312 - PlaceOrderResponse, 313 313 - PlaceOrderError, 314 314 - Options<PlaceOrderData> 315 315 - > = { 316 316 - mutationFn: async (options) => { 317 317 - const { data } = await placeOrder({ 318 318 - ...options, 319 319 - throwOnError: true, 320 320 - }); 321 321 - return data; 322 322 - }, 293 293 + export const placeOrderMutation = () => { 294 294 + const mutationOptions: MutationOptions< 295 295 + PlaceOrderResponse, 296 296 + PlaceOrderError, 297 297 + Options<PlaceOrderData> 298 298 + > = { 299 299 + mutationFn: async (options) => { 300 300 + const { data } = await placeOrder({ 301 301 + ...options, 302 302 + throwOnError: true, 303 303 + }); 304 304 + return data; 305 305 + }, 306 306 + }; 307 307 + return mutationOptions; 323 308 }; 324 309 325 310 export const getOrderByIdOptions = (options: Options<GetOrderByIdData>) => ··· 327 312 queryFn: async ({ queryKey }) => { 328 313 const { data } = await getOrderById({ 329 314 ...options, 330 330 - ...queryKey[0].params, 315 315 + ...queryKey[0], 331 316 throwOnError: true, 332 317 }); 333 318 return data; 334 319 }, 335 335 - queryKey: [ 336 336 - { 337 337 - params: createQueryKeyParams(options), 338 338 - scope: 'getOrderById', 339 339 - }, 340 340 - ], 320 320 + queryKey: [createQueryKey('getOrderById', options)], 341 321 }); 342 322 343 343 - export const deleteOrderMutation: MutationOptions< 344 344 - void, 345 345 - DefaultError, 346 346 - Options<DeleteOrderData> 347 347 - > = { 348 348 - mutationFn: async (options) => { 349 349 - const { data } = await deleteOrder({ 350 350 - ...options, 351 351 - throwOnError: true, 352 352 - }); 353 353 - return data; 354 354 - }, 323 323 + export const deleteOrderMutation = () => { 324 324 + const mutationOptions: MutationOptions< 325 325 + void, 326 326 + DefaultError, 327 327 + Options<DeleteOrderData> 328 328 + > = { 329 329 + mutationFn: async (options) => { 330 330 + const { data } = await deleteOrder({ 331 331 + ...options, 332 332 + throwOnError: true, 333 333 + }); 334 334 + return data; 335 335 + }, 336 336 + }; 337 337 + return mutationOptions; 355 338 }; 356 339 357 340 export const createUserOptions = (options?: Options<CreateUserData>) => ··· 359 342 queryFn: async ({ queryKey }) => { 360 343 const { data } = await createUser({ 361 344 ...options, 362 362 - ...queryKey[0].params, 345 345 + ...queryKey[0], 363 346 throwOnError: true, 364 347 }); 365 348 return data; 366 349 }, 367 367 - queryKey: [ 368 368 - { 369 369 - params: createQueryKeyParams(options), 370 370 - scope: 'createUser', 371 371 - }, 372 372 - ], 350 350 + queryKey: [createQueryKey('createUser', options)], 373 351 }); 374 352 375 375 - export const createUserMutation: MutationOptions< 376 376 - CreateUserResponse, 377 377 - CreateUserError, 378 378 - Options<CreateUserData> 379 379 - > = { 380 380 - mutationFn: async (options) => { 381 381 - const { data } = await createUser({ 382 382 - ...options, 383 383 - throwOnError: true, 384 384 - }); 385 385 - return data; 386 386 - }, 353 353 + export const createUserMutation = () => { 354 354 + const mutationOptions: MutationOptions< 355 355 + CreateUserResponse, 356 356 + CreateUserError, 357 357 + Options<CreateUserData> 358 358 + > = { 359 359 + mutationFn: async (options) => { 360 360 + const { data } = await createUser({ 361 361 + ...options, 362 362 + throwOnError: true, 363 363 + }); 364 364 + return data; 365 365 + }, 366 366 + }; 367 367 + return mutationOptions; 387 368 }; 388 369 389 370 export const createUsersWithListInputOptions = ( ··· 393 374 queryFn: async ({ queryKey }) => { 394 375 const { data } = await createUsersWithListInput({ 395 376 ...options, 396 396 - ...queryKey[0].params, 377 377 + ...queryKey[0], 397 378 throwOnError: true, 398 379 }); 399 380 return data; 400 381 }, 401 401 - queryKey: [ 402 402 - { 403 403 - params: createQueryKeyParams(options), 404 404 - scope: 'createUsersWithListInput', 405 405 - }, 406 406 - ], 382 382 + queryKey: [createQueryKey('createUsersWithListInput', options)], 407 383 }); 408 384 409 409 - export const createUsersWithListInputMutation: MutationOptions< 410 410 - CreateUsersWithListInputResponse, 411 411 - CreateUsersWithListInputError, 412 412 - Options<CreateUsersWithListInputData> 413 413 - > = { 414 414 - mutationFn: async (options) => { 415 415 - const { data } = await createUsersWithListInput({ 416 416 - ...options, 417 417 - throwOnError: true, 418 418 - }); 419 419 - return data; 420 420 - }, 385 385 + export const createUsersWithListInputMutation = () => { 386 386 + const mutationOptions: MutationOptions< 387 387 + CreateUsersWithListInputResponse, 388 388 + CreateUsersWithListInputError, 389 389 + Options<CreateUsersWithListInputData> 390 390 + > = { 391 391 + mutationFn: async (options) => { 392 392 + const { data } = await createUsersWithListInput({ 393 393 + ...options, 394 394 + throwOnError: true, 395 395 + }); 396 396 + return data; 397 397 + }, 398 398 + }; 399 399 + return mutationOptions; 421 400 }; 422 401 423 402 export const loginUserOptions = (options?: Options<LoginUserData>) => ··· 425 404 queryFn: async ({ queryKey }) => { 426 405 const { data } = await loginUser({ 427 406 ...options, 428 428 - ...queryKey[0].params, 407 407 + ...queryKey[0], 429 408 throwOnError: true, 430 409 }); 431 410 return data; 432 411 }, 433 433 - queryKey: [ 434 434 - { 435 435 - params: createQueryKeyParams(options), 436 436 - scope: 'loginUser', 437 437 - }, 438 438 - ], 412 412 + queryKey: [createQueryKey('loginUser', options)], 439 413 }); 440 414 441 415 export const logoutUserOptions = (options?: Options) => ··· 443 417 queryFn: async ({ queryKey }) => { 444 418 const { data } = await logoutUser({ 445 419 ...options, 446 446 - ...queryKey[0].params, 420 420 + ...queryKey[0], 447 421 throwOnError: true, 448 422 }); 449 423 return data; 450 424 }, 451 451 - queryKey: [ 452 452 - { 453 453 - params: createQueryKeyParams(options), 454 454 - scope: 'logoutUser', 455 455 - }, 456 456 - ], 425 425 + queryKey: [createQueryKey('logoutUser', options)], 457 426 }); 458 427 459 428 export const getUserByNameOptions = (options: Options<GetUserByNameData>) => ··· 461 430 queryFn: async ({ queryKey }) => { 462 431 const { data } = await getUserByName({ 463 432 ...options, 464 464 - ...queryKey[0].params, 433 433 + ...queryKey[0], 465 434 throwOnError: true, 466 435 }); 467 436 return data; 468 437 }, 469 469 - queryKey: [ 470 470 - { 471 471 - params: createQueryKeyParams(options), 472 472 - scope: 'getUserByName', 473 473 - }, 474 474 - ], 438 438 + queryKey: [createQueryKey('getUserByName', options)], 475 439 }); 476 440 477 477 - export const updateUserMutation: MutationOptions< 478 478 - UpdateUserResponse, 479 479 - UpdateUserError, 480 480 - Options<UpdateUserData> 481 481 - > = { 482 482 - mutationFn: async (options) => { 483 483 - const { data } = await updateUser({ 484 484 - ...options, 485 485 - throwOnError: true, 486 486 - }); 487 487 - return data; 488 488 - }, 441 441 + export const updateUserMutation = () => { 442 442 + const mutationOptions: MutationOptions< 443 443 + UpdateUserResponse, 444 444 + UpdateUserError, 445 445 + Options<UpdateUserData> 446 446 + > = { 447 447 + mutationFn: async (options) => { 448 448 + const { data } = await updateUser({ 449 449 + ...options, 450 450 + throwOnError: true, 451 451 + }); 452 452 + return data; 453 453 + }, 454 454 + }; 455 455 + return mutationOptions; 489 456 }; 490 457 491 491 - export const deleteUserMutation: MutationOptions< 492 492 - void, 493 493 - DefaultError, 494 494 - Options<DeleteUserData> 495 495 - > = { 496 496 - mutationFn: async (options) => { 497 497 - const { data } = await deleteUser({ 498 498 - ...options, 499 499 - throwOnError: true, 500 500 - }); 501 501 - return data; 502 502 - }, 458 458 + export const deleteUserMutation = () => { 459 459 + const mutationOptions: MutationOptions< 460 460 + void, 461 461 + DefaultError, 462 462 + Options<DeleteUserData> 463 463 + > = { 464 464 + mutationFn: async (options) => { 465 465 + const { data } = await deleteUser({ 466 466 + ...options, 467 467 + throwOnError: true, 468 468 + }); 469 469 + return data; 470 470 + }, 471 471 + }; 472 472 + return mutationOptions; 503 473 };

+1 -1

examples/openapi-ts-tanstack-svelte-query/src/routes/+page.svelte

··· 14 14 }); 15 15 16 16 const mutation = createMutation({ 17 17 - ...addPetMutation 17 17 + ...addPetMutation() 18 18 }); 19 19 </script> 20 20

+178 -219

examples/openapi-ts-tanstack-vue-query/src/client/@tanstack/vue-query.gen.ts

··· 5 5 6 6 import { 7 7 addPet, 8 8 + client, 8 9 createUser, 9 10 createUsersWithListInput, 10 11 deleteOrder, ··· 59 60 } from '../types.gen' 60 61 61 62 type QueryKey<TOptions extends Options> = [ 62 62 - { 63 63 - infinite?: boolean 64 64 - params: Pick<TOptions, 'body' | 'headers' | 'path' | 'query'> 65 65 - scope: string 63 63 + Pick<TOptions, 'baseUrl' | 'body' | 'headers' | 'path' | 'query'> & { 64 64 + _id: string 65 65 + _infinite?: boolean 66 66 } 67 67 ] 68 68 69 69 - const createQueryKeyParams = <TOptions extends Options>( 70 70 - options?: TOptions 71 71 - ): QueryKey<TOptions>[0]['params'] => { 72 72 - const params: QueryKey<TOptions>[0]['params'] = {} as QueryKey<TOptions>[0]['params'] 69 69 + const createQueryKey = <TOptions extends Options>( 70 70 + id: string, 71 71 + options?: TOptions, 72 72 + infinite?: boolean 73 73 + ): QueryKey<TOptions>[0] => { 74 74 + const params: QueryKey<TOptions>[0] = { 75 75 + _id: id, 76 76 + baseUrl: client.getConfig().baseUrl 77 77 + } as QueryKey<TOptions>[0] 78 78 + if (infinite) { 79 79 + params._infinite = infinite 80 80 + } 73 81 if (options?.body) { 74 82 params.body = options.body 75 83 } ··· 90 98 queryFn: async ({ queryKey }) => { 91 99 const { data } = await addPet({ 92 100 ...options, 93 93 - ...queryKey[0].params, 101 101 + ...queryKey[0], 94 102 throwOnError: true 95 103 }) 96 104 return data 97 105 }, 98 98 - queryKey: [ 99 99 - { 100 100 - params: createQueryKeyParams(options), 101 101 - scope: 'addPet' 102 102 - } 103 103 - ] 106 106 + queryKey: [createQueryKey('addPet', options)] 104 107 }) 105 108 106 106 - export const addPetMutation: UseMutationOptions< 107 107 - AddPetResponse, 108 108 - AddPetError, 109 109 - Options<AddPetData> 110 110 - > = { 111 111 - mutationFn: async (options) => { 112 112 - const { data } = await addPet({ 113 113 - ...options, 114 114 - throwOnError: true 115 115 - }) 116 116 - return data 109 109 + export const addPetMutation = () => { 110 110 + const mutationOptions: UseMutationOptions<AddPetResponse, AddPetError, Options<AddPetData>> = { 111 111 + mutationFn: async (options) => { 112 112 + const { data } = await addPet({ 113 113 + ...options, 114 114 + throwOnError: true 115 115 + }) 116 116 + return data 117 117 + } 117 118 } 119 119 + return mutationOptions 118 120 } 119 121 120 120 - export const updatePetMutation: UseMutationOptions< 121 121 - UpdatePetResponse, 122 122 - UpdatePetError, 123 123 - Options<UpdatePetData> 124 124 - > = { 125 125 - mutationFn: async (options) => { 126 126 - const { data } = await updatePet({ 127 127 - ...options, 128 128 - throwOnError: true 129 129 - }) 130 130 - return data 122 122 + export const updatePetMutation = () => { 123 123 + const mutationOptions: UseMutationOptions< 124 124 + UpdatePetResponse, 125 125 + UpdatePetError, 126 126 + Options<UpdatePetData> 127 127 + > = { 128 128 + mutationFn: async (options) => { 129 129 + const { data } = await updatePet({ 130 130 + ...options, 131 131 + throwOnError: true 132 132 + }) 133 133 + return data 134 134 + } 131 135 } 136 136 + return mutationOptions 132 137 } 133 138 134 139 export const findPetsByStatusOptions = (options?: Options<FindPetsByStatusData>) => ··· 136 141 queryFn: async ({ queryKey }) => { 137 142 const { data } = await findPetsByStatus({ 138 143 ...options, 139 139 - ...queryKey[0].params, 144 144 + ...queryKey[0], 140 145 throwOnError: true 141 146 }) 142 147 return data 143 148 }, 144 144 - queryKey: [ 145 145 - { 146 146 - params: createQueryKeyParams(options), 147 147 - scope: 'findPetsByStatus' 148 148 - } 149 149 - ] 149 149 + queryKey: [createQueryKey('findPetsByStatus', options)] 150 150 }) 151 151 152 152 export const findPetsByTagsOptions = (options?: Options<FindPetsByTagsData>) => ··· 154 154 queryFn: async ({ queryKey }) => { 155 155 const { data } = await findPetsByTags({ 156 156 ...options, 157 157 - ...queryKey[0].params, 157 157 + ...queryKey[0], 158 158 throwOnError: true 159 159 }) 160 160 return data 161 161 }, 162 162 - queryKey: [ 163 163 - { 164 164 - params: createQueryKeyParams(options), 165 165 - scope: 'findPetsByTags' 166 166 - } 167 167 - ] 162 162 + queryKey: [createQueryKey('findPetsByTags', options)] 168 163 }) 169 164 170 165 export const getPetByIdOptions = (options: Options<GetPetByIdData>) => ··· 172 167 queryFn: async ({ queryKey }) => { 173 168 const { data } = await getPetById({ 174 169 ...options, 175 175 - ...queryKey[0].params, 170 170 + ...queryKey[0], 176 171 throwOnError: true 177 172 }) 178 173 return data 179 174 }, 180 180 - queryKey: [ 181 181 - { 182 182 - params: createQueryKeyParams(options), 183 183 - scope: 'getPetById' 184 184 - } 185 185 - ] 175 175 + queryKey: [createQueryKey('getPetById', options)] 186 176 }) 187 177 188 178 export const updatePetWithFormOptions = (options: Options<UpdatePetWithFormData>) => ··· 190 180 queryFn: async ({ queryKey }) => { 191 181 const { data } = await updatePetWithForm({ 192 182 ...options, 193 193 - ...queryKey[0].params, 183 183 + ...queryKey[0], 194 184 throwOnError: true 195 185 }) 196 186 return data 197 187 }, 198 198 - queryKey: [ 199 199 - { 200 200 - params: createQueryKeyParams(options), 201 201 - scope: 'updatePetWithForm' 202 202 - } 203 203 - ] 188 188 + queryKey: [createQueryKey('updatePetWithForm', options)] 204 189 }) 205 190 206 206 - export const updatePetWithFormMutation: UseMutationOptions< 207 207 - void, 208 208 - DefaultError, 209 209 - Options<UpdatePetWithFormData> 210 210 - > = { 211 211 - mutationFn: async (options) => { 212 212 - const { data } = await updatePetWithForm({ 213 213 - ...options, 214 214 - throwOnError: true 215 215 - }) 216 216 - return data 191 191 + export const updatePetWithFormMutation = () => { 192 192 + const mutationOptions: UseMutationOptions<void, DefaultError, Options<UpdatePetWithFormData>> = { 193 193 + mutationFn: async (options) => { 194 194 + const { data } = await updatePetWithForm({ 195 195 + ...options, 196 196 + throwOnError: true 197 197 + }) 198 198 + return data 199 199 + } 217 200 } 201 201 + return mutationOptions 218 202 } 219 203 220 220 - export const deletePetMutation: UseMutationOptions<void, DefaultError, Options<DeletePetData>> = { 221 221 - mutationFn: async (options) => { 222 222 - const { data } = await deletePet({ 223 223 - ...options, 224 224 - throwOnError: true 225 225 - }) 226 226 - return data 204 204 + export const deletePetMutation = () => { 205 205 + const mutationOptions: UseMutationOptions<void, DefaultError, Options<DeletePetData>> = { 206 206 + mutationFn: async (options) => { 207 207 + const { data } = await deletePet({ 208 208 + ...options, 209 209 + throwOnError: true 210 210 + }) 211 211 + return data 212 212 + } 227 213 } 214 214 + return mutationOptions 228 215 } 229 216 230 217 export const uploadFileOptions = (options: Options<UploadFileData>) => ··· 232 219 queryFn: async ({ queryKey }) => { 233 220 const { data } = await uploadFile({ 234 221 ...options, 235 235 - ...queryKey[0].params, 222 222 + ...queryKey[0], 236 223 throwOnError: true 237 224 }) 238 225 return data 239 226 }, 240 240 - queryKey: [ 241 241 - { 242 242 - params: createQueryKeyParams(options), 243 243 - scope: 'uploadFile' 244 244 - } 245 245 - ] 227 227 + queryKey: [createQueryKey('uploadFile', options)] 246 228 }) 247 229 248 248 - export const uploadFileMutation: UseMutationOptions< 249 249 - UploadFileResponse, 250 250 - UploadFileError, 251 251 - Options<UploadFileData> 252 252 - > = { 253 253 - mutationFn: async (options) => { 254 254 - const { data } = await uploadFile({ 255 255 - ...options, 256 256 - throwOnError: true 257 257 - }) 258 258 - return data 230 230 + export const uploadFileMutation = () => { 231 231 + const mutationOptions: UseMutationOptions< 232 232 + UploadFileResponse, 233 233 + UploadFileError, 234 234 + Options<UploadFileData> 235 235 + > = { 236 236 + mutationFn: async (options) => { 237 237 + const { data } = await uploadFile({ 238 238 + ...options, 239 239 + throwOnError: true 240 240 + }) 241 241 + return data 242 242 + } 259 243 } 244 244 + return mutationOptions 260 245 } 261 246 262 247 export const getInventoryOptions = (options?: Options) => ··· 264 249 queryFn: async ({ queryKey }) => { 265 250 const { data } = await getInventory({ 266 251 ...options, 267 267 - ...queryKey[0].params, 252 252 + ...queryKey[0], 268 253 throwOnError: true 269 254 }) 270 255 return data 271 256 }, 272 272 - queryKey: [ 273 273 - { 274 274 - params: createQueryKeyParams(options), 275 275 - scope: 'getInventory' 276 276 - } 277 277 - ] 257 257 + queryKey: [createQueryKey('getInventory', options)] 278 258 }) 279 259 280 260 export const placeOrderOptions = (options?: Options<PlaceOrderData>) => ··· 282 262 queryFn: async ({ queryKey }) => { 283 263 const { data } = await placeOrder({ 284 264 ...options, 285 285 - ...queryKey[0].params, 265 265 + ...queryKey[0], 286 266 throwOnError: true 287 267 }) 288 268 return data 289 269 }, 290 290 - queryKey: [ 291 291 - { 292 292 - params: createQueryKeyParams(options), 293 293 - scope: 'placeOrder' 294 294 - } 295 295 - ] 270 270 + queryKey: [createQueryKey('placeOrder', options)] 296 271 }) 297 272 298 298 - export const placeOrderMutation: UseMutationOptions< 299 299 - PlaceOrderResponse, 300 300 - PlaceOrderError, 301 301 - Options<PlaceOrderData> 302 302 - > = { 303 303 - mutationFn: async (options) => { 304 304 - const { data } = await placeOrder({ 305 305 - ...options, 306 306 - throwOnError: true 307 307 - }) 308 308 - return data 273 273 + export const placeOrderMutation = () => { 274 274 + const mutationOptions: UseMutationOptions< 275 275 + PlaceOrderResponse, 276 276 + PlaceOrderError, 277 277 + Options<PlaceOrderData> 278 278 + > = { 279 279 + mutationFn: async (options) => { 280 280 + const { data } = await placeOrder({ 281 281 + ...options, 282 282 + throwOnError: true 283 283 + }) 284 284 + return data 285 285 + } 309 286 } 287 287 + return mutationOptions 310 288 } 311 289 312 290 export const getOrderByIdOptions = (options: Options<GetOrderByIdData>) => ··· 314 292 queryFn: async ({ queryKey }) => { 315 293 const { data } = await getOrderById({ 316 294 ...options, 317 317 - ...queryKey[0].params, 295 295 + ...queryKey[0], 318 296 throwOnError: true 319 297 }) 320 298 return data 321 299 }, 322 322 - queryKey: [ 323 323 - { 324 324 - params: createQueryKeyParams(options), 325 325 - scope: 'getOrderById' 326 326 - } 327 327 - ] 300 300 + queryKey: [createQueryKey('getOrderById', options)] 328 301 }) 329 302 330 330 - export const deleteOrderMutation: UseMutationOptions< 331 331 - void, 332 332 - DefaultError, 333 333 - Options<DeleteOrderData> 334 334 - > = { 335 335 - mutationFn: async (options) => { 336 336 - const { data } = await deleteOrder({ 337 337 - ...options, 338 338 - throwOnError: true 339 339 - }) 340 340 - return data 303 303 + export const deleteOrderMutation = () => { 304 304 + const mutationOptions: UseMutationOptions<void, DefaultError, Options<DeleteOrderData>> = { 305 305 + mutationFn: async (options) => { 306 306 + const { data } = await deleteOrder({ 307 307 + ...options, 308 308 + throwOnError: true 309 309 + }) 310 310 + return data 311 311 + } 341 312 } 313 313 + return mutationOptions 342 314 } 343 315 344 316 export const createUserOptions = (options?: Options<CreateUserData>) => ··· 346 318 queryFn: async ({ queryKey }) => { 347 319 const { data } = await createUser({ 348 320 ...options, 349 349 - ...queryKey[0].params, 321 321 + ...queryKey[0], 350 322 throwOnError: true 351 323 }) 352 324 return data 353 325 }, 354 354 - queryKey: [ 355 355 - { 356 356 - params: createQueryKeyParams(options), 357 357 - scope: 'createUser' 358 358 - } 359 359 - ] 326 326 + queryKey: [createQueryKey('createUser', options)] 360 327 }) 361 328 362 362 - export const createUserMutation: UseMutationOptions< 363 363 - CreateUserResponse, 364 364 - CreateUserError, 365 365 - Options<CreateUserData> 366 366 - > = { 367 367 - mutationFn: async (options) => { 368 368 - const { data } = await createUser({ 369 369 - ...options, 370 370 - throwOnError: true 371 371 - }) 372 372 - return data 329 329 + export const createUserMutation = () => { 330 330 + const mutationOptions: UseMutationOptions< 331 331 + CreateUserResponse, 332 332 + CreateUserError, 333 333 + Options<CreateUserData> 334 334 + > = { 335 335 + mutationFn: async (options) => { 336 336 + const { data } = await createUser({ 337 337 + ...options, 338 338 + throwOnError: true 339 339 + }) 340 340 + return data 341 341 + } 373 342 } 343 343 + return mutationOptions 374 344 } 375 345 376 346 export const createUsersWithListInputOptions = (options?: Options<CreateUsersWithListInputData>) => ··· 378 348 queryFn: async ({ queryKey }) => { 379 349 const { data } = await createUsersWithListInput({ 380 350 ...options, 381 381 - ...queryKey[0].params, 351 351 + ...queryKey[0], 382 352 throwOnError: true 383 353 }) 384 354 return data 385 355 }, 386 386 - queryKey: [ 387 387 - { 388 388 - params: createQueryKeyParams(options), 389 389 - scope: 'createUsersWithListInput' 390 390 - } 391 391 - ] 356 356 + queryKey: [createQueryKey('createUsersWithListInput', options)] 392 357 }) 393 358 394 394 - export const createUsersWithListInputMutation: UseMutationOptions< 395 395 - CreateUsersWithListInputResponse, 396 396 - CreateUsersWithListInputError, 397 397 - Options<CreateUsersWithListInputData> 398 398 - > = { 399 399 - mutationFn: async (options) => { 400 400 - const { data } = await createUsersWithListInput({ 401 401 - ...options, 402 402 - throwOnError: true 403 403 - }) 404 404 - return data 359 359 + export const createUsersWithListInputMutation = () => { 360 360 + const mutationOptions: UseMutationOptions< 361 361 + CreateUsersWithListInputResponse, 362 362 + CreateUsersWithListInputError, 363 363 + Options<CreateUsersWithListInputData> 364 364 + > = { 365 365 + mutationFn: async (options) => { 366 366 + const { data } = await createUsersWithListInput({ 367 367 + ...options, 368 368 + throwOnError: true 369 369 + }) 370 370 + return data 371 371 + } 405 372 } 373 373 + return mutationOptions 406 374 } 407 375 408 376 export const loginUserOptions = (options?: Options<LoginUserData>) => ··· 410 378 queryFn: async ({ queryKey }) => { 411 379 const { data } = await loginUser({ 412 380 ...options, 413 413 - ...queryKey[0].params, 381 381 + ...queryKey[0], 414 382 throwOnError: true 415 383 }) 416 384 return data 417 385 }, 418 418 - queryKey: [ 419 419 - { 420 420 - params: createQueryKeyParams(options), 421 421 - scope: 'loginUser' 422 422 - } 423 423 - ] 386 386 + queryKey: [createQueryKey('loginUser', options)] 424 387 }) 425 388 426 389 export const logoutUserOptions = (options?: Options) => ··· 428 391 queryFn: async ({ queryKey }) => { 429 392 const { data } = await logoutUser({ 430 393 ...options, 431 431 - ...queryKey[0].params, 394 394 + ...queryKey[0], 432 395 throwOnError: true 433 396 }) 434 397 return data 435 398 }, 436 436 - queryKey: [ 437 437 - { 438 438 - params: createQueryKeyParams(options), 439 439 - scope: 'logoutUser' 440 440 - } 441 441 - ] 399 399 + queryKey: [createQueryKey('logoutUser', options)] 442 400 }) 443 401 444 402 export const getUserByNameOptions = (options: Options<GetUserByNameData>) => ··· 446 404 queryFn: async ({ queryKey }) => { 447 405 const { data } = await getUserByName({ 448 406 ...options, 449 449 - ...queryKey[0].params, 407 407 + ...queryKey[0], 450 408 throwOnError: true 451 409 }) 452 410 return data 453 411 }, 454 454 - queryKey: [ 455 455 - { 456 456 - params: createQueryKeyParams(options), 457 457 - scope: 'getUserByName' 458 458 - } 459 459 - ] 412 412 + queryKey: [createQueryKey('getUserByName', options)] 460 413 }) 461 414 462 462 - export const updateUserMutation: UseMutationOptions< 463 463 - UpdateUserResponse, 464 464 - UpdateUserError, 465 465 - Options<UpdateUserData> 466 466 - > = { 467 467 - mutationFn: async (options) => { 468 468 - const { data } = await updateUser({ 469 469 - ...options, 470 470 - throwOnError: true 471 471 - }) 472 472 - return data 415 415 + export const updateUserMutation = () => { 416 416 + const mutationOptions: UseMutationOptions< 417 417 + UpdateUserResponse, 418 418 + UpdateUserError, 419 419 + Options<UpdateUserData> 420 420 + > = { 421 421 + mutationFn: async (options) => { 422 422 + const { data } = await updateUser({ 423 423 + ...options, 424 424 + throwOnError: true 425 425 + }) 426 426 + return data 427 427 + } 473 428 } 429 429 + return mutationOptions 474 430 } 475 431 476 476 - export const deleteUserMutation: UseMutationOptions<void, DefaultError, Options<DeleteUserData>> = { 477 477 - mutationFn: async (options) => { 478 478 - const { data } = await deleteUser({ 479 479 - ...options, 480 480 - throwOnError: true 481 481 - }) 482 482 - return data 432 432 + export const deleteUserMutation = () => { 433 433 + const mutationOptions: UseMutationOptions<void, DefaultError, Options<DeleteUserData>> = { 434 434 + mutationFn: async (options) => { 435 435 + const { data } = await deleteUser({ 436 436 + ...options, 437 437 + throwOnError: true 438 438 + }) 439 439 + return data 440 440 + } 483 441 } 442 442 + return mutationOptions 484 443 }

+2 -2

examples/openapi-ts-tanstack-vue-query/src/views/TanstackExample.vue

··· 40 40 const petInput = ref({ name: '', category: '' }) 41 41 42 42 const addPet = useMutation({ 43 43 - ...addPetMutation, 43 43 + ...addPetMutation(), 44 44 onError: (error) => { 45 45 console.log(error) 46 46 }, ··· 57 57 }) 58 58 59 59 const updatePet = useMutation({ 60 60 - ...updatePetMutation, 60 60 + ...updatePetMutation(), 61 61 onError: (error) => { 62 62 console.log(error) 63 63 },