Avoiding boilerplate on protected api routes

[raphaelbadia]

Hello,

Every app I work on includes some part that requires authentication, ofter a JWT bearer token stored in a context.

SWR provides a convenient way to define a default fetcher function : vercel/swr#325 (comment)

const state = useContext(AuthContext);
// ...
<SWRConfig
    value={{
        fetcher: async (url) => {
            const res = await fetch(url, {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${state.tokens?.access}`,
                },
            });
            return res.json();
        },
    }}
>
    {children}
</SWRConfig>

How could I do something similar with react-query ? I'd like to avoid listening to my context in every component I want to use react-query. 🤔

Thanks !

[tannerlinsley]

You can use something like axios’s request interceptors or make a custom proxy hook for useQuery that closes over your setup

…

On Jun 22, 2020, 1:21 AM -0600, Raphaël Badia ***@***.***>, wrote: Hello, Every app I work on includes some part that requires authentication, ofter a JWT bearer token stored in a context. SWR provides a convenient way to define a default fetcher function : vercel/swr#325 (comment) const state = useContext(AuthContext); // ... <SWRConfig value={{ fetcher: async (url) => { const res = await fetch(url, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${state.tokens?.access}`, }, }); return res.json(); }, }} > {children} </SWRConfig> How could I do something similar with react-query ? I'd like to avoid listening to my context in every component I want to use react-query. 🤔 Thanks ! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.