Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fetching data with hooks #131

Open
pierreyves-lebrun opened this issue Aug 25, 2019 · 6 comments
Open

Fetching data with hooks #131

pierreyves-lebrun opened this issue Aug 25, 2019 · 6 comments

Comments

@pierreyves-lebrun
Copy link

pierreyves-lebrun commented Aug 25, 2019

I would like to fetch remote data in getData using react hooks, however this can't be done within regular javascript functions as per React rules of hooks.

getData being a regular function that returns object | Promise<object>, hooks can't be used there.

My concern is that more and more libraries are embracing hooks for data fetching, (e.g React Apollo hooks).

I could obviously use hooks in my pages/components, but that would kind of defeat the purpose of react-navi getData.

Do you have any advice on what would be the best approach for this issue?

Edit: I found a somewhat similar issue there.

I could use plain promise based queries using apollo client as per the above issue example, but I would still really like to use hooks instead as I can auto generate them thanks to a package called graphql-gen, which makes it far easier and less error prone compared to using the bare apollo client.

@jamesknelson
Copy link
Collaborator

The issue with hooks is that useEffect() is not designed to be run on the server, so for SSR, you need a non-React way to fetch your initial data.

One option would be to provide a hooks-like API within Navi, but that's... a lot of work and maintenance, and will never be quite as useful as just being able to use hooks.

This is a tricky problem. I'll leave the issue open, but I really don't know how to approach this right now.

@lookfirst
Copy link
Contributor

For apollo, I don't think you'd want to fetch data in getData(). How do you deal with loading state and errors?

I can't really see a usecase for getData() other than getData() is where the NaviRequest is so that is the easiest way to pull out params, but with this provider, you just wrap your view...

getView: (request) => <RequestContextProvider value={request}><Edit/></RequestContextProvider>,

And within <Edit/> you can call const {params} = useRequest().

@jamesknelson
Copy link
Collaborator

@lookfirst the main reason you'd use getData() is if you're doing SSR. In this case, you want the data to be available before the initial render, so at least the initial data needs to be fetched within the router, as opposed to within a component.

@lookfirst
Copy link
Contributor

lookfirst commented Sep 6, 2019 via email

@pierreyves-lebrun
Copy link
Author

James would explain it far better than I will, but thanks to packages like isomorphic-unfetch you can fetch data and handle errors regardless of the environment, be it a server or a browser.

SSR has its purpose, especially when you care about performance and SEO. You might not need it personally, neither do I at this point, but for bigger applications you probably will have to consider it.

One thing it took me time to realize is that Navi is built with SSR in mind, even-though you can perfectly use it for CSR apps.

It sounds obvious to be me now but until James mentions it, I hadn’t realized getData() main purpose is SSR.

To answer your question, SSR is indeed more complex than CSR but it has become far more friendly for the last couple years.

I actually have big hopes for Navi as it’s got huge potential, knowing that React will eventually release suspense for SSR.

@lookfirst
Copy link
Contributor

lookfirst commented Sep 6, 2019 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants