URQL SSR With Next.js

[HarryET]

Hey, i'm trying to use urql ssr with next but i can't find a way to pass the cookies back! Any suggestions? this is my UrqlClient config:

export const createUrqlClient = (ssrExchange: any): any => ({
    url: "http://localhost:80/graphql",
    fetchOptions: {
        credentials: "include" as const,
    },
    headers: {
        cookie: ctx?.req?.headers?.cookie
    },
    exchanges: [
        dedupExchange,
        cacheExchange({
            // ... removed for ease of reading :)
        }),
        ssrExchange,
        fetchExchange
    ]
})

i tried to add the cookie: ctx?.req?.headers?.cookie but dont know how to pass ctx to it :/ this is how i use it:

export default withUrqlClient(createUrqlClient, {ssr: false}) (Login);

[kitten]

The request context, i.e. ctx, is the second argument that this function will receive for withUrqlClient :) https://github.com/FormidableLabs/urql/blob/8c74924c1d49588f265cbc3776e98fbff4995199/packages/next-urql/src/types.ts#L6-L9

[HarryET]

export const createUrqlClient = (ssrExchange: SSRExchange, ctx: NextPageContext): ClientOptions => ({
    url: "http://localhost:80/graphql",
    fetchOptions: {
        credentials: "include" as const,
    },
    headers: {
        cookie: ctx?.req?.headers?.cookie
    },
    exchanges: [
        devtoolsExchange,//! REMOVE IN PROD
        dedupExchange,
        cacheExchange({
            // ... removed for ease of reading :)
        }),
        ssrExchange,
        fetchExchange
    ]
})

[HarryET]

also trying this:

fetchOptions: {
        credentials: "include" as const,
        header: {
            "cookie": JSON.stringify(ctx?.req?.headers?.cookie)
        }
    },

fails to send any cookies

[JoviDeCroock]

Here's an article describing how to auth generally in urql.

Your example in the above is correct, but you should use headers rather than header

[kitten]

Just to clarify; yes, it doesn't take headers directly, because headers are part of fetchOptions :)

[HarryET]

Awsome! I'll send a new message with my fix for anyone else :) thanks for all the help!

[HarryET]

Here is the fix:

export const createUrqlClient = (ssrExchange: SSRExchange, ctx?: NextPageContext): any => ({
    url: "http://localhost:80/graphql",
    fetchOptions: {
        credentials: "include" as const,
        headers: {
            cookie: ctx?.req?.headers?.cookie
        }
    },
    exchanges: [
        devtoolsExchange,//! REMOVE IN PROD
        dedupExchange,
        cacheExchange({
            // ... removed for ease of reading :)
        }),
        ssrExchange,
        fetchExchange
    ]
})