React Query with GraphQL | React Query Tutorial

[@Weibenfalk]

React-Query v3.2 is officially released now so you don't need to use the beta version =)

[@CodingNuggets]

Never used it with graphql. I saw you talking about this in your newest video and became interested. Thanks for this info Thomas. Strongly considering changing from Apollo.

[@yourdadishere]

Dude, you have the best teaching accent--I mean, voice!

[@JamesQQuick]

This was great. Thanks so much for this!

[@Weibenfalk]

Thanks .. glad it helped! =)

[@vasilispapasakellariou4074]

Love your accent bro. Also your teaching

[@dark9y8]

Thank you, subscribed!

[@AdrianTwarog]

Awesome!

[@Weibenfalk]

Thanks man!

[@gauravmithas2362]

this was awesome tutorial, thanks @Weibenfalk

[@bakbak1830]

How i can upload files using react-query and graphql. I am really struggling on that end.

[@hakuna_matata_hakuna]

thank you, this is how all tutorials should be you literally threw in how to use tokens and headers which would have been a long trip to stack overflow

[@Weibenfalk]

Thanks! Truly appreciate your support!

[@tronganhnguyenthanh1157]

How can I fix the error Maximum call stack size exceeded in graphql ?

[@juagarciaga]

Hello! pretty nice your tutorial :) thank you so much for your free content. I have a question: From where is the coming `query` tag on line 13? I'm not been able to reproduce the example when the query has variables.

[@Weibenfalk]

Hi and thanks. I'm not exactly sure what you mean. If you look at the finished project files you can see how it works. You can name your query to whatever you want like below: const GET_COUNTRY = gql` query thisCanBeNamedAnytning($code: ID!) { country(code: $code) { name } } `; The param "code" is passed in via the object to the custom hook that is created for GraphQL fetching and then graphql-request uses that argument of "code" for the query.

[@roberto9369]

So nice man. Thanks

[@jamesfromvenice]

Hey, will this work in "getServerSideProps" or "getInitialProps" when using Next.js?

[@Weibenfalk]

Yes ... you can grab initial data and pass it along to react-query react-query.tanstack.com/guides/ssr

[@syvirren57]

Just found this, but could you do an example using this but for mutations?

[@Weibenfalk]

I can maybe look into that.

[@76Freeman]

Hi Weibenfalk, Thank you very much for the great video, I've been wondering if I should keep going with @apollo/client or give it a try with react-query and your video just convinced me to give it a try :) You've earned a new subscriber :)

[@Weibenfalk]

Thank you!

[@zomakaja]

But react-query does't have any knowledge of the qraphql schema, and therefore can't enforce type correctness on the client. Right?

[@Weibenfalk]

Yes it can. You have to generate types with a tool for that. I’m doing that right now for my client. We’re actually using only the type generation from Apollo now

[@Yassinebridii]

Check this out: graphql-code-generator.com/docs/plugins/typescript-react-query

[@henriquekramer_]

amazing tkss

[@avneet12284]

So good.

[@hugodsa89]

dude the first sound literally gives a headache to anyone with headphones

[@Weibenfalk]

Well. At least you’re awake and got your attention ;)

[@hugodsa89]

@@Weibenfalk didn’t mean to come off in a bad way mate. Just a heads up for future. 👍🏻

[@Weibenfalk]

No worries ... I also think it's subjective and what gear people are using etc. Can't please all! But this one is not a good one .. I agree on that. Haven't used it that often.