next-urql: how do I add devtoolsExchange?

[TimonVS]

urql version & exchanges:

• urql: 1.9.8
• next-urql: 1.0.2
• @urql/devtools: 2.0.2

I'm wondering how you can add the devtools exchange without overriding the default exchanges with next-urql. The next-urql docs mention something about mergeExchanges in the second argument of withUrqlClient, but I can only pass ssr as an option in the second argument. If I provide exchanges in the first argument, it'll not apply the default exchanges (https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.tsx#L48 and https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.tsx#L84).

[JoviDeCroock]

Hey,

The defaultExchanges are dedupExchange, cacheExchange, ssr, fetchExchange in that order as you linked. So if you want to apply this to your next-urql client you should do:

import { fetchExchange, dedupExchange, cacheExchange } from 'urql';
import { devtoolsExchange } from '@urql/devtools';

export default withUrqlClient(ssr => {
  ...yourConfig
  exchanges: process.browser ? 
     [dedupExchange, devtoolsExchange, cacheExchange, ssr, fetchExchange] :
     [dedupExchange, cacheExchange, ssr, fetchExchange]
})(YourComponent)

[TimonVS]

Fair enough! The documentation about mergeExchanges had me confused.