React Native small project showing how to properly do Auth Exchange

[ghost]

Hi,

It would be really nice to have a really small expo project or similar showing how to properly do auth in react native 🙂

I've managed to do it by passing the variables but it's not the best way to do it.

Besides, I don't understand what's the point of using authExchange when I can simply use fetchOptionsExchange` like this:

export const fetchOptionsExchange = (fn: any): Exchange => ({ forward }) => (ops$) => {
    return pipe(
        ops$,
        mergeMap((operation: Operation) => {
            const result = fn(operation.context.fetchOptions);
            return pipe(
                isPromise(result) ? fromPromise(result) : (fromValue(result) as any),
                map((fetchOptions: RequestInit | (() => RequestInit)) => ({
                    ...operation,
                    context: { ...operation.context, fetchOptions },
                })),
            );
        }),
        forward,
    );
};

const client = (token) =>
    createClient({
        url: "some url",
        exchanges: [
            dedupExchange,
            cacheExchange,
            fetchOptionsExchange(async (fetchOptions) => {
                return Promise.resolve({
                    ...fetchOptions,
                    headers: {
                        Authorization: token,
                    },
                });
            }),
            fetchExchange,
        ],
    });

Well, the reason why I'm using fetchOptionsExchange is mainly because the example give me plenty of errors (react native again, with typescript).

Also, I guess it's not possible to do this fetchOptionsExchange without wonka right?

[JoviDeCroock]

The authExchange is mainly meant for OAuth flows where you can have errored tokens due to needing a refresh, .... so it enables you to do these flows without having to account for retrying manually and so on.

Yes you always need wonka, as described in our exchanges documentation, this is our main pattern to allow for extensability within urql.

This is an example, https://codesandbox.io/s/billowing-pond-lrmoj?file=/src/index.tsx:507-510 RequestInit is showing an error here because CSB can't find it but it's a global in TypeScript https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html

[ghost]

Ok, I see. I'll try to share my snippets for RN if I ever found a correct implementation then.

Thank you for your answer.