Fetching data with hooks

[pierreyves-lebrun]

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]

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]

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]

@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]

How does ssr deal with loading errors? I really don’t get this whole ssr thing. Feels like going back in time into something very hard to debug.

…

On Fri, Sep 6, 2019 at 7:45 AM James K Nelson ***@***.***> wrote: @lookfirst <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#131?email_source=notifications&email_token=AAAU225MWFQASMEJJAUXZTDQIGRZZA5CNFSM4IPJBDNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6BLZNA#issuecomment-528661684>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAU222CR2FNRNOQDG4356DQIGRZZANCNFSM4IPJBDNA> .

[pierreyves-lebrun]

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]

Oh, don't get me wrong. Navi is my favorite router ever. Extremely well done.

…

On Fri, Sep 6, 2019 at 10:28 AM Pierre Lebrun ***@***.***> wrote: James would explain it far better than I will, but thanks to packages like isomorphic-unfetch <https://www.npmjs.com/package/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#131?email_source=notifications&email_token=AAAU2227PYJCCN2ZRQCSDJDQIHE7RA5CNFSM4IPJBDNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6BTLHQ#issuecomment-528692638>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAU222RFW4BYLZW3AHHAN3QIHE7RANCNFSM4IPJBDNA> .