Dude, sometimes it seems we are doing the same project lol I was looking EXACTLY for most of these things (sharing, TS generation from GQL) on a new project yesterday and today you land this video. Awesome!
Hey Ben! Few questions: How does GraphQL Codegen know what data you want to fetch? Does it create Fragments? Wouldn't sharing the queries between web/mobile result in overfetching on one or the other platform? If I understand it correctly you are making a tradeoff here to make the code simpler and reusable. One other concern is that without fragments, doing query updating can become error-prone, e.g. BooksQuery and AuthorsQuery where author { books { edges { node { id } } }, an updateBookMutation needs to update BooksQuery and also the update the book in the AuthorsQuery.
1. you write the query/mutations and select any data you want 2. no, you write the fragments and use it in your query/mutations 3. it could, I usually reuse the query if you need the same fields or you only need to tack on a few cheap fields otherwise I split it up. So far I've only needed to split up 2 different queries. 4. agreed using fragments is a good idea
ben you have covered containerization with docker. Do you have any plan on orchestration with docker swarm/kubernetes from a developer's point of view?
I'm having trouble using the same logic between nextjs and expo in a lerna only monorepo. Importing the hooks results in an "Could not find "client" in the context" error in next . Generating the hooks locally, in the nextjs package, works fine. Any ideas what could be the problem?
@@bawad I'm working in this direction but no luck so far. I checked the library versions and they are the same. I'm generating the hooks in controller and implement the logic in the Apollo Example of next to create the provider. I don't know how to debug next so now i am comparing the generated static code of each version.
@@bawad Ok, I found it. I had removed react as a dependency from controller because i was getting an error about not being able to use hooks outside of a function component. So i started getting the error about the missing apolloclient. To solve the problem i added react back to the controller and hoisted all the dependencies with lerna. I guess having the same version o react is not enough. in order for the hooks to work, it must be the same package. github.com/facebook/react/issues/13991#issue-comment-box
Hey Ben do you know how to get hot reloading in react native working with functional components and hooks? I feel so pain using class based components just to get hot reloading working please help
@@bawad, As far as I know and researched in react-native init projects (not expo) there must be a root class-based component to get hot reload working so that the hot reloading calls the render method on those class components without resetting the state object but not in case of functional components it re-execute the component function so all state get lost if it's working in your case I would love to see your configurations
Dude, sometimes it seems we are doing the same project lol
I was looking EXACTLY for most of these things (sharing, TS generation from GQL) on a new project yesterday and today you land this video. Awesome!
Thanks for the video!
A video on sharing between react-native and react-native-web would be money!!!
ruclips.net/p/PLN3n1USn4xll9wq0rw0ECrO0j2PFzuXtn
now 2023, should i follow this approach or is there any better approach now? any blog link or nay thing
Hey Ben, love the content man! With this project were you able to integrate the Hermes Engine?
I'm using expo, so I have to wait for them to add it
Hey Ben! Few questions:
How does GraphQL Codegen know what data you want to fetch?
Does it create Fragments?
Wouldn't sharing the queries between web/mobile result in overfetching on one or the other platform?
If I understand it correctly you are making a tradeoff here to make the code simpler and reusable. One other concern is that without fragments, doing query updating can become error-prone, e.g. BooksQuery and AuthorsQuery where author { books { edges { node { id } } }, an updateBookMutation needs to update BooksQuery and also the update the book in the AuthorsQuery.
1. you write the query/mutations and select any data you want
2. no, you write the fragments and use it in your query/mutations
3. it could, I usually reuse the query if you need the same fields or you only need to tack on a few cheap fields otherwise I split it up. So far I've only needed to split up 2 different queries.
4. agreed using fragments is a good idea
Hey Ben, how will we deploy web, app, server part when using this pattern
Hi Ben,
Do you have any tutorial on how to use GraphQL code generator to create hooks?
ruclips.net/video/25GS0MLT8JU/видео.html
I’m actually asking you from that/this video.
What do you mean?
@@bawad Oh sorry, my mistakes. Thanks for all your videos. They really help me alot.
ben you have covered containerization with docker. Do you have any plan on orchestration with docker swarm/kubernetes from a developer's point of view?
when I learn it, yes
@@bawad cool.
Thanks for sharing!
I'm having trouble using the same logic between nextjs and expo in a lerna only monorepo. Importing the hooks results in an "Could not find "client" in the context" error in next . Generating the hooks locally, in the nextjs package, works fine. Any ideas what could be the problem?
I assume you have an ApolloProvider wrapping your application in both cases
Maybe you were using different versions of the library?
It should work
@@bawad I'm working in this direction but no luck so far. I checked the library versions and they are the same. I'm generating the hooks in controller and implement the logic in the Apollo Example of next to create the provider. I don't know how to debug next so now i am comparing the generated static code of each version.
@@bawad Ok, I found it. I had removed react as a dependency from controller because i was getting an error about not being able to use hooks outside of a function component. So i started getting the error about the missing apolloclient. To solve the problem i added react back to the controller and hoisted all the dependencies with lerna. I guess having the same version o react is not enough. in order for the hooks to work, it must be the same package.
github.com/facebook/react/issues/13991#issue-comment-box
glad you figured it out!
@@bawad Your content is great! I learned a lot.
hi, can i use packages from react native in react js project. if possible then what is work around.
Thanks my dude
Hey Ben do you know how to get hot reloading in react native working with functional components and hooks? I feel so pain using class based components just to get hot reloading working please help
Does hot reloading not work with hooks?
@@bawad, As far as I know and researched in react-native init projects (not expo) there must be a root class-based component to get hot reload working so that the hot reloading calls the render method on those class components without resetting the state object but not in case of functional components it re-execute the component function so all state get lost
if it's working in your case I would love to see your configurations
I've only been using expo, so haven't tried the hot reloading
Ok no problem keep it up you are doing great
Hi Ben, can you please create a" hello world " project using this code sharing. Can you please do it ? Step by step .... From starting to end
ruclips.net/video/G8KXFWftCg0/видео.html
Why not use react-native-web instead?
at the time, I was worried it was too experimental
and react navigation is also experimental with react native web.
My laptop is old. running Mac Os 10.10. if I'm not able to install yarn, can this still apply to npm?
it can run npm, but not yarn?
I'm not sure how to setup something similar to yarn workspaces with just npm
Lookup Lerna
As far as I remember it's tough if you're not using TypeScript.
the typescript compiler can transpile javascript, so you can use the same setup for js
have you tried expo with nextjs? docs.expo.io/versions/v35.0.0/guides/using-nextjs/
not, yet