如何让 TypeScript 满意扩展从 'node modules' 导入的 类？

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的解决方案解决了查询字段的问题，但由于另一个'error'导致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 数据源。在我的项目中，我扩展了这个库定义的 class

 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方法来自导入库的class。我该如何解决这个问题才能使 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 所需的类型定义——我搜索了 'type definitions Apollo Server' 并找到了 this，但它有很多依赖项，我还必须找到并下载。我想知道是否有类似 @types/apollo-server 的东西（当我做了 yarn @types/apollo-server 时，我得到了 https://registry.yarnpkg.com/@types%2fapollo-server: Not found.）。

感谢您提供任何信息！

Answer 1

apollo-datasource-graphql 仓库中有一个公开的 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 文件夹并转到查询功能。选项参数有所需的类型。正如文档所说，您需要在选项中提供作为第一个参数传递的查询作为这样的查询

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