marcin-piela/react-fetching-library

Issue with SSR and requestInterceptors

yoeran opened this issue · 8 comments

yoeran commented

Thanks for this amazing library. It looks great and almost works perfectly!
I'm trying to set this up in a SSR NextJS project. I've used these instructions from the documentation and SSR works great.

My next step was to add a requestInterceptor so that I don't have to type the base API domain over and over again. For this I used your example host interceptor. As follows:

const requestHostInterceptor = host => client => async action => {
    return {
        ...action,
        endpoint: `${host}${action.endpoint}`,
    }
}

export const client = createClient({
    cacheProvider: cache,
    requestInterceptors: [requestHostInterceptor('http://local.api.dev')],
})

But SSR stops working as soon as I add the requestInterceptors property to createClient. The endpoint gets called twice (first backend, then frontend again because it finds there is no cache). So the client is making the call correctly from the backend to the api, but somehow the payload remains undefined while rendering on the server.

I've looked through the code, but can't find any pointers. Do you have any ideas?

marcin-piela commented

@yoeran please check this example on codesandbox (I think it's working correctly):
https://codesandbox.io/s/react-fetching-library-ssr-nextjs-9d7t0

Is it ok? Maybe you forgot about

 client.cache.setItems(cacheItems);
yoeran commented

@marcin-piela Thanks for the quick response! Code-wise it's exactly the same, the only difference I see is your example is using next ^8.1.0, while I'm at next ^9.0.5. I tried downgrading nextjs in my project, but that gives compatibility issues with my code. Could you try your example with 9.0.5? Otherwise I'll try it later this week.

yoeran commented

Wait, just tried to fork your codesandbox, but your example isn't quite working as intended though. It's giving results even though with that configuration the endpoint URL should have become https://private-34f3a-reactapiclient.apiary-mock.com/https://private-34f3a-reactapiclient.apiary-mock.com/users (yes double domain, because you defined it in both the action as the request interceptor)

marcin-piela commented

After fix that it's not working as you described in the issue. I will try fix it tomorrow, this is the problem with storing in cache action before processing by interceptors

marcin-piela commented

If you have codesandbox with nextjs v9 please provide me link :)

yoeran commented

Here is the codesandbox link, not really familiar with codesandbox, so hope it's correct: https://codesandbox.io/s/react-fetching-library-ssr-nextjs-u5827

  • 👍1
yoeran commented

Excellent! Works like a charm. Thanks so much for the quick response.