How to query inside next.js middleware?

[khurram-ansari]

I am using urql in next.js 14 with app router and I am trying to query backend in middleware and I am getting this error

What am I doing wrong?

Here is the code

middleware.ts

import type { NextRequest } from 'next/server';
import { getClient } from '@/lib/gqlClient';
import { CurrentUserDocument } from './gql/graphql';
import { cookies } from 'next/headers';

export async function middleware(request: NextRequest) {
  const resultQl = await getClient().query(CurrentUserDocument, {});

  if (!resultQl.error) {
    const sessionToken = resultQl.data?.customer?.sessionToken;

    cookies().set('woocommerce-session', 'Session '+sessionToken);
  }
}

urql client

import { cacheExchange, createClient, fetchExchange } from '@urql/core';
import { registerUrql } from '@urql/next/rsc';

const makeGqlClient = () => {
  return createClient({
    url: 'https://example.com/graphql',

    exchanges: [cacheExchange, fetchExchange],
  });
};

const { getClient } = registerUrql(makeGqlClient);

export { getClient };

[JoviDeCroock]

I don't think a middleware is meant to use RSC imports, it's more meant to use @urql/core and query data that way. The @urql/next/rsc imports are meant for server components and @urql/next mainly for React.

[hdmjesus]

Hello, good for this you can use the same makeClient function that passes to the ApolloNextAppProvider:

`'use client'

import { ApolloLink, RequestHandler, split } from '@apollo/client'
import { onError } from '@apollo/client/link/error'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { getMainDefinition } from '@apollo/client/utilities'

import {
ApolloNextAppProvider,
ApolloClient,
InMemoryCache
} from '@apollo/experimental-nextjs-app-support'

import { createUploadLink } from 'apollo-upload-client'
import { createClient } from 'graphql-ws'

const URL_API_HTTP = ${ process.env.NEXT_PUBLIC_API_URL ?? process.env.API_URL }/graphql

const URL_API_WS = ${ process.env.NEXT_PUBLIC_API_URL_WS ?? process.env.API_URL_WS }/graphql

export function makeClient () {
const uploadLink: unknown = createUploadLink({
uri: ${URL_API_HTTP}/graphql
})

const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
for (const err of graphQLErrors) {
console.error('graphQLErrors', err.message)
}
}

if (networkError) console.error(`[Network error]: ${networkError}`)

})

const combinedLink = ApolloLink.from([
errorLink,
uploadLink as ApolloLink | RequestHandler
])

const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query)
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
)
},
new GraphQLWsLink(
createClient({
url: ${URL_API_WS}/graphql
})
),
combinedLink
)

return new ApolloClient({
uri: URL_API_HTTP,
ssrMode: typeof window === 'undefined',
link: splitLink,
cache: new InMemoryCache(),
connectToDevTools: true
})
}

export function ApolloWrapper ({ children }: React.PropsWithChildren) {
return (

{children}

)
}
`

then in your middleware you can use it like this:

middleware.ts

`
import { NextRequest, NextResponse } from 'next/server'
import { makeClient } from './lib/ApolloWrapper'
import { GET_USER_TOKEN } from './gql/queries/userToken.query'

export async function middleware (req: NextRequest) {
const token = req.cookies.get('accessToken')?.value
const client = makeClient()

const {
      data: { dataWithToken }
    } = await client.query({
      query: GET_USER_TOKEN,
      context: {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      }
    })

return NextResponse.next()
}

export const config = {
matcher: ['/', '/login', '/empieza']
}

`