Urql认证：addAuthToOperation编译错误求助

问题场景 #

按照urql官方认证文档实现Authorization请求头添加逻辑时，调用makeOperation触发TypeScript编译错误，核心提示context._instance类型不兼容。

代码实现 #

type AuthState = {
  token:string
};

return authExchange<AuthState>({
 addAuthToOperation: ({ authState, operation }) => {
  if (!authState || !authState.token) {
    return operation;
  }

  const fetchOptions =
    typeof operation.context.fetchOptions === 'function'
      ? operation.context.fetchOptions()
      : operation.context.fetchOptions || {};

  return makeOperation(
    operation.kind, 
    operation, {
    ...operation.context,
    fetchOptions: {
      ...fetchOptions,
      headers: {
        ...fetchOptions.headers,
        Authorization: authState.token,
      },
    },
  });
},   

编译错误信息 #

(alias) makeOperation<any, AnyVariables>(kind: OperationType, request: GraphQLRequest<any, AnyVariables>, context: OperationContext): Operation<...> (+1 overload)
import makeOperation
No overload matches this call.
  Overload 1 of 2, '(kind: OperationType, request: GraphQLRequest<any, AnyVariables>, context: OperationContext): Operation<any, AnyVariables>', gave the following error.
    Argument of type '{ fetchOptions: { headers: { Authorization: string; length: number; toString(): string; toLocaleString(): string; pop(): [string, string]; push(...items: [string, string][]): number; concat(...items: ConcatArray<...>[]): [...][]; concat(...items: ([...] | ConcatArray<...>)[]): [...][]; ... 28 more ...; [Symbol.unsco...' is not assignable to parameter of type 'OperationContext'.
      Types of property '_instance' are incompatible.
        Type 'OperationInstance' is not assignable to type '[]'.
  Overload 2 of 2, '(kind: OperationType, request: Operation<any, AnyVariables>, context?: OperationContext): Operation<any, AnyVariables>', gave the following error.
    Argument of type 'import("/Users/vineelnalla/work/ledgers/web/node_modules/@urql/exchange-auth/node_modules/@urql/core/dist/types/types").Operation<any, import("/Users/vineelnalla/work/ledgers/web/node_modules/@urql/exchange-auth/node_modules/@urql/core/dist/types/types").AnyVariables>' is not assignable to parameter of type 'import("/Users/vineelnalla/work/ledgers/web/node_modules/@urql/exchange-auth/node_modules/@urql/core/dist/types/types").Operation<any, import("/Users/vineelnalla/work/ledgers/web/node_modules/@urql/exchange-auth/node_modules/@urql/core/dist/types/types").AnyVariables>'.
      The types of 'context._instance' are incompatible between these types.
        Type 'OperationInstance' is not assignable to type '[]'.ts(2769)
No quick fixes available

使用的依赖版本 #

"@urql/devtools": "^2.0.3",
"@urql/exchange-auth": "^1.0.0",
"@urql/exchange-graphcache": "^4.4.3",
"urql": "^2.2.3",

问题原因 #

错误源于依赖版本不兼容：
@urql/exchange-auth@1.0.0是适配urql@3.x版本的，而当前使用的urql@2.2.3属于2.x分支，两者依赖的@urql/core版本不一致，导致重复安装了不同版本的核心库，进而引发OperationContext类型定义冲突（核心差异为_instance属性类型）。

解决方案 #

1. 统一依赖版本（推荐） #

修改package.json，将@urql/exchange-auth降级到与urql@2.2.3兼容的版本：

"@urql/exchange-auth": "^0.4.2",
"urql": "^2.2.3"

然后清理旧依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

2. 临时类型兼容方案（不推荐） #

若暂时无法修改版本，可通过显式覆盖冲突属性绕过类型检查：

return makeOperation(
  operation.kind,
  operation,
  {
    ...operation.context,
    fetchOptions: {
      ...fetchOptions,
      headers: {
        ...fetchOptions.headers,
        Authorization: authState.token,
      },
    },
    _instance: [] as any,
  }
);

内容的提问来源于stack exchange，提问作者Vineel Nalla