Vue 中使用 Urql 和 GraphQL-Codegen：如何在响应式变量中使用 GraphQL

在 Vue 中使用 Urql 和 GraphQL-Codegen 的响应式变量

前言

在使用 GraphQL-Codegen 生成 TypeScript 定义和使用 Urql 进行 GraphQL 查询时，您可能会遇到一个挑战：Urql 需要 Vue 响应式变量才能使其响应性，但 GraphQL-Codegen 默认只接受标量变量。本文将深入探讨此问题并提供一种利用自定义标量转换器解决此问题的解决方案。

问题：Vue 响应式变量和 GraphQL-Codegen

Urql 允许您在使用 useQuery() 时使用 Vue 响应式变量，例如 ref 或 reactive。这使得查询对变量的变化具有响应性，并会在变量更新时自动触发查询重新执行。

然而，GraphQL-Codegen 根据 GraphQL 模式生成类型，该模式通常定义变量为标量类型（例如字符串、布尔值或数字）。当您尝试在 Urql 查询中使用 Vue 响应式变量时，它会抛出类型错误，因为 Vue 响应式变量不是标量类型。

解决方案：自定义标量转换器

为了解决此问题，GraphQL-Codegen 提供了自定义标量转换器的功能。转换器允许您将自定义类型映射到 GraphQL 模式中的标量类型。在本例中，我们将创建一个转换器来将 Vue 响应式变量转换为字符串标量。

以下是在 codegen.ts 配置文件中添加转换器的示例代码：

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  // ...existing configuration
  plugins: [
    {
      // Custom scalar converter
      onCreateVariablesDefinition: (def) => {
        if (def.type === 'Ref<string>') {
          return {
            ...def,
            type: 'string',
            default: () => '""', // Default to empty string for now
          };
        }
        return def;
      },
    },
  ],
};

这个转换器会检测 Ref<string> 类型并将其转换为 string 类型。我们还设置了一个默认值，以便 TypeScript 推断出类型。应用此配置后，GraphQL-Codegen 将生成正确的类型，使您能够在 Urql 查询中使用 Vue 响应式变量。

使用示例

以下是如何在 Vue 中使用自定义标量转换器的示例：

import { ref, useQuery } from '@vue/apollo-composable'
import { queryGQL } from '@/gql/queries' // The GraphQL query

// Create a Vue Ref for the variable
const id = ref('123')

// Execute the query using the Vue Ref
const queryResult = useQuery({
  query: queryGQL,
  variables: { _id: id },
})

现在，当 id 变量更改时，Urql 查询将自动重新执行，反映变量的新值。

常见问题解答

1. 它是如何工作的？

自定义标量转换器将 Vue 响应式变量转换为 GraphQL 模式中的标量类型。当 Urql 查询执行时，这些变量将作为字符串传递到 GraphQL 服务器。

2. 我可以转换其他类型吗？

是的，您可以自定义转换器以将任何其他类型转换为 GraphQL 标量类型。

3. 转换器是在哪里创建的？

自定义标量转换器在 codegen.ts 配置文件中创建。

4. 我在哪里可以找到自定义标量转换器的更多示例？

请参考 GraphQL-Codegen 文档中的自定义标量转换器部分：https://graphql-code-generator.com/docs/plugins/scalars

5. 为什么需要默认值？

TypeScript 需要一个默认值才能推断类型。在示例中，我们将默认值设置为一个空字符串，但您也可以使用其他适当的值。

结论

通过使用 GraphQL-Codegen 的自定义标量转换器，您现在可以在 Urql 查询中使用 Vue 响应式变量。这使您可以创建响应式 GraphQL 查询，并在变量更改时自动更新结果。通过这种方法，您可以充分利用 Urql 和 GraphQL-Codegen 的强大功能，为您的 Vue 应用程序构建动态和高效的 GraphQL 查询。