redwoodjs / redwoodjs-com-archive

Public website for RedwoodJS
https://redwoodjs.com
129 stars 156 forks source link

cookbook: react custom hook with graphql? #532

Open wminshew opened 3 years ago

wminshew commented 3 years ago

I feel like there are some use cases where users may want to add their own custom hooks instead of using cells (e.g. for auth, although that use case is already covered). Believe a cookbook for custom hooks "the redwood/graphql way" might be really helpful (if custom hooks is not "the redwood/graphql way" I am interested in hearing that too!)

cannikin commented 3 years ago

Redwood does have a useQuery (which cells use internally) that you could use yourself, but if you're going to use useQuery then Redwood's belief is that you may as well use a Cell, otherwise you're worrying about loading/error states yourself. But if you really want to... :)

I can see this being a helpful cookbook article though, there's currently zero results returned for a search for "useQuery" on the site. 😬

jtoar commented 3 years ago

@wminshew I've wanted to write an xstate cookbook for some time now so maybe I could include a section on making your own hooks there. If you want a great resource on abstracting your logic into hooks for the time being, this video is 💯 https://www.youtube.com/watch?v=eWO1b6EoCnQ

wminshew commented 3 years ago

thanks for the video -- is very good! Have done ~regular react hooks before, but I guess one specific thing I'm not sure about with redwood / graphql:

now that children can be passed to Cells, can a Cell with children be used with useState or useContext in the Success component to create a custom hook layer with external data or will only instantiating the ~state hook after success cause issues?

(this is easy enough to test next time I need the functionality, will report back here; for now have just been using Cells + aggressive caching instead of pulling once in a higher order Provider component & then hooking from there in deeper components, again like e.g. auth/currentUser -- speaking of which, was interesting to see that the AuthProvider simply uses window.fetch)