feat: vike-react-urql

[enri90]

Hi how can i use urql with vike?

Server

const ssr = ssrExchange({ isClient: false, initialState: undefined })

const urqlClient = createClient({
    url: settings.graphUrl,
    exchanges: [
      cacheExchange,
      ssr,
      mapExchange({
        onError(error, _operation) {
          const isAuthError = error.graphQLErrors.some((e) => e.extensions?.code === 'JWT')
          if (isAuthError)  res.clearCookie('token', { domain: settings.domainCookie })
        }
      }),
      AuthServer({ res, settings, token: tokens }),
      fetchExchange
    ],
    fetchOptions: {
      credentials: 'include'
    },
    suspense: true,
    fetch
  })

Client

new Client({
    url: pageContext.settings.graphUrl,
    fetchSubscriptions: true,
    exchanges: [
      ssrExchange({ isClient: true, initialState: pageContext.urqlState }),
      AuthClient({ settings: pageContext.settings }),
      fetchExchange
    ],
    fetchOptions: {
      credentials: 'include'
    }
  })

Thx!

[brillout]

From the snippets you shared, I don't see any blockers to use urql with vike-react.

There is an example of using urql (although without vike-react), see https://vike.dev/urql.

Can the example be migrated to use vike-react or is there anything blocking about vike-react — some kind of custom vike-react hook? See the source code of vike-react (it's small!) and of the various vike-react-* extensions to see how it can be done.

Contribution welcome to create vike-react-urql.

[enri90]

which hook do you think is better to use?

the order is not clear enough to me
+data is executed before onBeforeRenderHtml

so in the server side call in urql it does not find the UrqlServer instance

export { onBeforeRenderHtml }

import type { PageContextServer } from 'vike/types'
import { assertUsage } from '../utils/assert.js'

function onBeforeRenderHtml(pageContext: PageContextServer) {
  const { UrqlServer: getUrqlServer } = pageContext.config

  if (pageContext.config.UrqlServer !== null) {
    assertUsage(getUrqlServer, 'Setting +UrqlServer is required')

    const urql = getUrqlServer(pageContext)

    pageContext.urqlServer = urql.urqlServer
    pageContext.urqlState = urql.urqlState
  }
}

[brillout]

How about not using the +data hook at all and use a onBeforeRenderHtml() that is async instead?