Comments (24)
@mkeyy0 soon https://github.com/hey-api/openapi-ts/blob/main/packages/openapi-ts/test/__snapshots__/test/generated/v3-hey-api-client-fetch-plugin-tanstack-react-query/@tanstack/react-query.gen.ts.snap
from openapi-ts.
I hope that other framework versions of TanStack, like Vue, will also be supported.
from openapi-ts.
Very exciting. RQ support gonna sky rocket this package!
from openapi-ts.
@Jannchie most definitely 🙏
from openapi-ts.
Support for React, Solid, Svelte, and Vue done, currently undergoing testing. If anyone wants to try it out early, add this to your configuration file
for React
plugins: ['@tanstack/react-query']
for Solid
plugins: ['@tanstack/solid-query']
for Svelte
plugins: ['@tanstack/svelte-query']
for Vue
plugins: ['@tanstack/vue-query']
and feel free to open a new issue if you run into any problems! I don't really expect the APIs to change, but it has not been thoroughly tested (except for React), so you never know!
from openapi-ts.
Yep, I did have a look at it, might prioritise it actually. Will queryOptions()
objects be enough for you @vinnymeller?
from openapi-ts.
can't wait too. good work guys
from openapi-ts.
@RobertOstermann we should talk about that use case, perhaps separately. Query key design is important. I've also heard from others they need URL base as part of it so they can target by the client which made the request.
from openapi-ts.
Hey @sahinkutlu, would generating queryOptions()
objects be enough to start?
from openapi-ts.
@mrlubos yes, that would be perfect & remove a lot of boilerplate
from openapi-ts.
@mrlubos Amazing! I'm so excited for this. 😁
from openapi-ts.
@brmdbr Hopefully within 2 weeks, but if you want to test drive it earlier, send me a message on Discord/email/Twitter/LinkedIn and I can walk you through it (in exchange for some feedback 😈)
from openapi-ts.
I was trying to pass in a number. Tried adding it as a new element at the end of the query key array, but no luck. I prefer to pass in my own query key so I can easily invalidate several queries, all which share that same query key, when a mutation is complete. I think it not matching the expected shape was the issue.
Also, thanks for all your hard work on this! Super useful.
useQuery({
... serverGetOptions(),
queryKey: [...serverGetOptions().queryKey, idNumber],
enabled: false,
})
from openapi-ts.
@mrlubos is there any WIP on this? overall I'm having a good time using fetch API with tanstack query but there are some pain points that.. I'm sure you're aware of given that this is on the roadmap 🙂
from openapi-ts.
Hey @sahinkutlu, would generating
queryOptions()
objects be enough to start?
Hi @mrlubos! Yes generated query options would very nice 👍 When do you think it will be released?
Cheers!
from openapi-ts.
It would be nice to have. I'm thinking about writing my generator, but if it's implemented in your library it would be just awesome!
from openapi-ts.
Looking forward to this.
from openapi-ts.
Looking forward to use this in combination with vue. Is there an ETA?
from openapi-ts.
@Jannchie @brmdbr can you get in touch with me to test the Vue plugin?
from openapi-ts.
@mrlubos It would be nice if we could override some of the tanstack query options. I prefer to set some options manually, such as enabled
and staleTime
, and this would allow for those manual changes. I haven't looked into the query key part of it too much, so not sure if that would work with the typing, but having the ability to add additional keys would be appreciated.
Here is my idea on how to do this with adding the tanstackQueryOptions
as a parameter.
export const serverGetOptions = (
options: Options<ServerGetData>,
tanstackQueryOptions?: Omit<UndefinedInitialDataOptions<any, Error, any, any[]>, "queryFn">,
) => {
return queryOptions({
...tanstackQueryOptions,
queryFn: async ({ queryKey }) => {
const { data } = await serverGet({
...options,
...queryKey[0].params,
throwOnError: true,
});
return data;
},
queryKey: [
{
params: createQueryKeyParams(options),
scope: "serverGet",
},
...(tanstackQueryOptions ? tanstackQueryOptions.queryKey : []),
],
});
};
from openapi-ts.
@RobertOstermann that's fair, I will need to improve types to unlock this feature. In the meantime, you can simply spread the response from this function onto useQuery()
and add your options there.
useQuery({
... serverGetOptions(),
enabled: false,
})
from openapi-ts.
I was able to do that for most of the options, but struggled to get it working with queryKey
, might just be user error though.
from openapi-ts.
@RobertOstermann what kind of query key are you passing? I would expect TypeScript to complain if it doesn't match the expected shape. That might need to be improved, why are you needing to pass your own query key?
from openapi-ts.
When using bundle: true
, the code doesn't seem to generate correctly. Maybe it's related to #939 ?
from openapi-ts.
Related Issues (20)
- Define required headers in one place for all service methods HOT 1
- How to only generate types without clients or the other stuff? HOT 3
- Add provenance statement
- Throw error on non-success response status
- TypeScript 4.x compatibility HOT 6
- Prettier & Eslint: Ability to specify the path of configuration files HOT 2
- Partial options function for tanstack-query HOT 7
- Full SDK generator HOT 1
- Improve query keys
- Enable autogen import/export files with file extension
- additionalProperties number type produces output interface with integer data type HOT 1
- Generate multiple clients HOT 1
- Duplicated code when using bundle HOT 2
- Endpoints with the same operationId generate single data type HOT 5
- Generation ignore a query parameter HOT 8
- The generated types from nested allOf and oneOf's don't compose correctly HOT 4
- Add continuous preview releases
- Export spec-compliant OpenAPI 3.1 interface
- Add an option to modify generated type names via a builder or a suffix HOT 1
- Add configurable default value for ThrowOnError HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from openapi-ts.