如何让 TypeScript 对扩展从“节点模块”导入的类感到满意？

Question

编辑：按要求添加了ARTICLES_QUERY、tsconfig.json 和package.json

编辑 2：这可行，但它似乎是一个丑陋的解决方案。如果有人有更好的，我将不胜感激

export default class InterfaceGraphQLApi extends GraphQLDataSource {
  baseURL = "http://localhost:4545/admin/api";

  query = super.query;

编辑 3：@Max 的解决方案解决了查询字段的问题，但它导致 TS 由于另一个“错误”而无法编译源：

ARTICLE_QUERY这里是

const ARTICLE_QUERY = gql`
  query Article($id: ID!) {
    Article(where: { id: $id }) {
      title
      text
      video {
        youtube {
          ... on OEmbedVideo {
            html
            type
          }
        }
      }
      podcast {
        spotify {
          ... on OEmbedRich {
            html
            type
          }
        }
      }
      images {
        file {
          filename
        }
      }
    }
  }
`;

编辑 4：Max 编辑后的解决方案运行良好。

---

我对 TypeScript 比较陌生。我正在导入一个library，它允许我为我的 Apollo Server 项目定义一个 GraphQL 数据源。在我的项目中，我正在扩展这个库定义的类

 import { GraphQLDataSource } from "apollo-datasource-graphql";
import { gql } from "apollo-server";

const ARTICLES_QUERY = gql`
  query {
    allArticles {
      title
      text
      id
      status
      images {
        file {
          filename
        }
      }
    }
  }
`;

export default class InterfaceGraphQLApi extends GraphQLDataSource {
      baseURL = "http://localhost:4545/admin/api";

      async getArticles() {
        try {
          const response = await this.query(ARTICLES_QUERY);

然而 TypeScript 抱怨 this.query，说

query 方法来自导入库的类。我该如何解决这个问题才能让 TypeScript 满意？

tsconfig.json 是

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "esnext",
      "dom"
    ],
    "skipLibCheck": true,
    "outDir": "dist",
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

而 package.json 是

{
  "dependencies": {
    "apollo-datasource-graphql": "^1.3.2",
    "apollo-server": "^2.10.1",
    "graphql": "^14.6.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
    "pino": "^5.16.0",
    "prettier": "^1.19.1",
    "ramda": "^0.26.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "dev": "tsc && node dist/index.js"
  }
}

此外，我想知道是否有人可以引导我使用 Apollo Server 和 GraphQL 所需的类型定义——我搜索了“类型定义 Apollo Server”并想出了 this，但它有我还必须查找和下载许多依赖项。我想知道是否有类似@types/apollo-server 的东西（当我使用yarn @types/apollo-server 时，我得到了https://registry.yarnpkg.com/@types%2fapollo-server: Not found.）。

感谢您提供任何信息！

Answer 1

apollo-datasource-graphql repo 中有一个公开的 PR：https://github.com/poetic/apollo-datasource-graphql/pull/11

同时有一个解决方案可以帮助您。更改您的导入来源：

import { GraphQLDataSource } from 'apollo-datasource-graphql';

到

import { GraphQLDataSource } from 'apollo-datasource-graphql/src';

最后，我在研究过程中发现了一个有趣的部分。我在apollo server 的文档中找到了一个部分，您可以在其中将 api 定义为资源而不是 graphql 服务器。您提供的代码实际上就是这种情况。

另外，如果你有其他问题可能会阻止 tsc 编译，请在你的 node_modules 下进入 apollo-datasource-graphql 文件夹并进入查询功能。 options 参数有所需的类型。正如文档所说，您需要在选项中提供作为第一个参数传递的查询作为这样的查询

const response = await this.query(ARTICLE_QUERY, { query: ARTICLE_QUERY, variables: { id }});