@@leighhalliday I also bought your course. It's funny, I was created a boilerplate using Google APIs and Next, it seems that your course could give me some ideas and teach me some new stuff 😉 (I'm also in Toronto BTW)
i would toulk about adding redux to your project, for example you cannot use hook useQuery in file action of course cuz we can use hooks just on component file, so need to create apolloclient and use it directly in your action or reducer file, so i propose to give us your opinion about that with best practice to use all theme togheter, thank you
Hey Kamal! Sorry, I haven't used Redux in quite a long time so I don't think I'd be the best to tackle that. That said, I show in this video (th-cam.com/video/FzlurzsCW4M/w-d-xo.html) how I like to manage different types of state, and I prefer to keep external data separate from application data. So in this case I would not use Redux for loading data from GraphQL.
i have some questions please, 1 - when should i memoize? should i do that in the view page (parent) or child component? 2 - should i call multi actions in view page like this: useEffect(() => { fetchJobs(}); fetchProfessions(); fetchContracts(); }, []); or instead, I should call fetchProfessions() and fetchContracts() inside fetchJobs action, keep in mind I am just using fetchProfessions() and fetchContracts() to get the data that I need for filtering jobs because I will have a sidebar that displays a list of professions checkbox and contracts checkbox, I hope you understand what I mean 3 - and because I need to call all of these APIs, I am facing an issue with memoizing, so each time mapStateToProps (because connect is using shallow compare, but in my case, I'm dealing with arrays so I must do a deep compare) will render the view page (parent), is that okay in this case, i know i can use memo, but is there any other solution i hope you could help me with this, also i'm waiting for your Nextjs course, i believe your course will help a lot, because i like the way you explain, anyway thank you, and have a nice day
Hi Leigh thanks for the video, in my current proyect we're using TypeScript with GraphQL Codegen but we use to have many conflics with the autogenerated typescript file, do you have some kind of advice for large teams to work with the GraphQL Codegen? Thanks!
Hey Gaston! It puts each Query/Mutation in its own file... does this mean you were having multiple people editing the same query at the same time? Because it's all generated, I would say if there is ever a conflict, just delete the whole folder and regenerate and then commit that.
@@leighhalliday the common case is that many people add queries/mutations in the graphql file and when you try to merge it ends up with many conflicts, we do what you just said above, ignore our changes and regenerate the whole file every time, but it's kinda annoying. The other main issue is that we have Codegen for the clients too, and the autogenerated files always end up old 😢 Thanks for the response!
Still need resolvers but you won’t have to define both your schema and also your resolvers… it generates the schema from your resolvers. It also generates types to use client side.
I have created separate files to hold queries according to domains (products, houses...). I have named each const camelCase and when generating with codegen, it looks... weird. Do I specifically have to name my constants uppercase?
Check out my new course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
by the way, what if in your query, you're asking for 1 less field than it's defined in schema? then your typescript would think it's there, but you're not actually getting it. With operation based generation, you write your query in a .graphql file, then let client generator generate code for specifically that operation, now, you don't even write gql on your ts file, rather, a react hook is created automatically :) (with the exact fields you asked for)
Is there a way to tell codegen to prefer types instead of interfaces? That way it would give you better insight of attributes when you hover over the data I think.
Great work! Question: I'm currently in the process of switching from a ruby graphql (apollo) api backend to a typescript equivalent. In ruby, I've built a gem that automatically generates every query and mutation and inputs and filters etc for all models simply based on reflecting the ActiveRecord models. Is there something similar for Typescript. I guess one requirement is the ORM level, and I'm on mongo so I guess Mongoose would be a good option. But I haven't found anything that takes that generative approach. All I want to do, or all I want my developers to do is to define strictly typed models and then just have the schema be generated in real time (or at times stored in a file). Any suggestions on how to approach this?
Hey Desertpillar! Sorry, that's something I don't have experience with. I spend most of my time working with GraphQL in Ruby as well. That's what we use at FlipGive :)
Unfortunately this only works for react client. I'm trying to run a qraphql client on a node server (yes the server is a client of another service). To use qraphql in plain vanilla typescript nodejs you need to import from 'apollo/client/core', and there is no useQuery available.
![[NEW] Voice AI Agent Beta in Voiceflow](http://i.ytimg.com/vi/UX8uVSKYgo0/mqdefault.jpg)
your style makes things approachable...Thanks
Thanks Joseph! Glad you enjoyed it :)
Thank you for that short and sweet new video!
Thanks David!! Glad you enjoyed it :)
@@leighhalliday I also bought your course. It's funny, I was created a boilerplate using Google APIs and Next, it seems that your course could give me some ideas and teach me some new stuff 😉 (I'm also in Toronto BTW)
Thank you Leigh for all the lessons. Really appreciate.
Thanks Ashim! Glad you're enjoying the content!!
really helpful, one question though, how did you do the multi select copy paste at 8:33 ?!
Thanks for another awesome video!! Would it be a good idea to use this with the nexus and prism setup from your other video or is it redundant?
Hey Manos! Definitely not redundant! Nexus can emit the schema as well, so it'd be the same sort of thing.
I like your videos so much! thank you
Thanks Leigh
I am using GraphQL Code Generator with Apollo v3, but it tells me it cannot load the schema. Any idea?
Awesome video learned a lot 😄
Awesome vid. Love your theme too. What theme you're using??
Thanks! Monokai One
Thanks for the effort :)
i implemented this in react-native project and looks like it doesnt feel the types.... any idea ?
i would toulk about adding redux to your project, for example you cannot use hook useQuery in file action of course cuz we can use hooks just on component file, so need to create apolloclient and use it directly in your action or reducer file, so i propose to give us your opinion about that with best practice to use all theme togheter, thank you
Hey Kamal! Sorry, I haven't used Redux in quite a long time so I don't think I'd be the best to tackle that. That said, I show in this video (th-cam.com/video/FzlurzsCW4M/w-d-xo.html) how I like to manage different types of state, and I prefer to keep external data separate from application data. So in this case I would not use Redux for loading data from GraphQL.
GraphQL codegen vs Apollo codegen, which one do you think is better?
I've only ever used the apollo codegen one, so I couldn't tell you... but they both essentially do the same thing right?
i have some questions please,
1 - when should i memoize? should i do that in the view page (parent) or child component?
2 - should i call multi actions in view page like this:
useEffect(() => {
fetchJobs(});
fetchProfessions();
fetchContracts();
}, []);
or instead, I should call fetchProfessions() and fetchContracts() inside fetchJobs action, keep in mind I am just using fetchProfessions() and fetchContracts() to get the data that I need for filtering jobs because I will have a sidebar that displays a list of professions checkbox and contracts checkbox, I hope you understand what I mean
3 - and because I need to call all of these APIs, I am facing an issue with memoizing, so each time mapStateToProps (because connect is using shallow compare, but in my case, I'm dealing with arrays so I must do a deep compare) will render the view page (parent), is that okay in this case, i know i can use memo, but is there any other solution
i hope you could help me with this, also i'm waiting for your Nextjs course, i believe your course will help a lot, because i like the way you explain, anyway thank you, and have a nice day
How do you think this compares to graphql code gen? Also, do you have the ability to make these cli flags part of a config file?
Nice tutorial
Hi Leigh thanks for the video, in my current proyect we're using TypeScript with GraphQL Codegen but we use to have many conflics with the autogenerated typescript file, do you have some kind of advice for large teams to work with the GraphQL Codegen?
Thanks!
Hey Gaston! It puts each Query/Mutation in its own file... does this mean you were having multiple people editing the same query at the same time? Because it's all generated, I would say if there is ever a conflict, just delete the whole folder and regenerate and then commit that.
@@leighhalliday the common case is that many people add queries/mutations in the graphql file and when you try to merge it ends up with many conflicts, we do what you just said above, ignore our changes and regenerate the whole file every time, but it's kinda annoying.
The other main issue is that we have Codegen for the clients too, and the autogenerated files always end up old 😢
Thanks for the response!
Do we no longer need resolvers then?
Still need resolvers but you won’t have to define both your schema and also your resolvers… it generates the schema from your resolvers. It also generates types to use client side.
I have created separate files to hold queries according to domains (products, houses...). I have named each const camelCase and when generating with codegen, it looks... weird.
Do I specifically have to name my constants uppercase?
Hmmm... off the top of my head I am not sure, you'll have to look at the docs in a bit more detail.
Awesome! Thank you!
You're welcome, Rubia! :)
Check out my new course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
i used the GraphQL Codegen which take a lot of time to install some package does it use hook like the GraphQL Codegen
Hey Cats! I'm not sure I understand the question... sorry!
by the way, what if in your query, you're asking for 1 less field than it's defined in schema? then your typescript would think it's there, but you're not actually getting it.
With operation based generation, you write your query in a .graphql file, then let client generator generate code for specifically that operation, now, you don't even write gql on your ts file, rather, a react hook is created automatically :) (with the exact fields you asked for)
Is there a way to tell codegen to prefer types instead of interfaces? That way it would give you better insight of attributes when you hover over the data I think.
It is difficult to program codegen. Especially when types are involved.
Great work! Question: I'm currently in the process of switching from a ruby graphql (apollo) api backend to a typescript equivalent. In ruby, I've built a gem that automatically generates every query and mutation and inputs and filters etc for all models simply based on reflecting the ActiveRecord models. Is there something similar for Typescript. I guess one requirement is the ORM level, and I'm on mongo so I guess Mongoose would be a good option. But I haven't found anything that takes that generative approach. All I want to do, or all I want my developers to do is to define strictly typed models and then just have the schema be generated in real time (or at times stored in a file). Any suggestions on how to approach this?
Hey Desertpillar! Sorry, that's something I don't have experience with. I spend most of my time working with GraphQL in Ruby as well. That's what we use at FlipGive :)
Unfortunately this only works for react client. I'm trying to run a qraphql client on a node server (yes the server is a client of another service).
To use qraphql in plain vanilla typescript nodejs you need to import from 'apollo/client/core', and there is no useQuery available.
You're right, this was specific for people using Apollo within React.
dude I watched your videos when you had a beard and only now realized that it was the same chanel xD
Haha... beards come and go but JavaScript is forever.
You have an exquisite expression.
:) Glad you enjoyed it!!
All reactive variables give error.
Is there a solution ?
Cannot query field "aramakelimesi" on type "Query".
prnt.sc/xm8jyt
I solved problem. If you get error like this, create another file in that directory and write "extend type" code into it
Help me
Typescript and VS Code are owned by microsoft! Have we lost that thread?!?
So is GitHub, NPM, and Clippy
thank you so much bro. apollo documentation is trash as hell..