Как порадовать TypeScript расширенными классами, импортированными из «узловых модулей»? - PullRequest
Новая
       59

Как порадовать TypeScript расширенными классами, импортированными из «узловых модулей»?

2 голосов
/ 02 марта 2020

Редактировать: Добавлено 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 не компилирует исходный код из-за другой ошибки: enter image description here

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: отредактированное решение Макса работает отлично.

Я относительно новый для TypeScript. Я импортирую библиотеку , которая позволяет мне определять источник данных GraphQL для моего проекта Apollo Server. В моем проекте я расширяю класс, который определяет эта библиотека 

 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, говоря:

enter image description here

Метод 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"
  ]
}

и пакет. 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.).

Спасибо за любую информацию!

1 Ответ

1 голос
/ 03 марта 2020

В репо 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 , где вы можете определить API как ресурс, а не сервер GraphQL. Это действительно так в предоставленном вами коде.

Кроме того, если у вас есть другие проблемы, которые могут помешать компиляции ts c, пожалуйста, go в ваших node_modules в папке apollo-datasource-graphql и go к функции запроса. Для параметра параметров есть нужный тип. И, как говорят документы, вы должны предоставить запрос, который вы передали в качестве первого параметра, также в опциях как запрос

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

...