无法为 apollo-graphql 客户端生成查询文件答案

【问题标题】：Can't generate query files for apollo-graphql client无法为 apollo-graphql 客户端生成查询文件
【发布时间】：2020-10-25 11:54:57
【问题描述】：

我正在尝试关注 Apollo graphql tutorial 并坚持创建 Apollo Client 当我运行npm run codegen 被翻译成apollo client:codegen --target typescript --watch 时，它给了我以下错误：

Generating query files with 'typescript' target
    → Syntax error in file:///Users/anatoly/Documents/git/fullstack-tutorial/start/client/src/pages/launches.tsx: Syntax Error: Unexpected <
…

我的 launches.tsx 看起来是正确的：

import React, { Fragment }  from 'react';
import { RouteComponentProps } from '@reach/router';
import gql from 'graphql-tag';

interface LaunchesProps extends RouteComponentProps {}

const Launches: React.FC<LaunchesProps> = () => {
  return <div />;
}

export const LAUNCH_TILE_DATA = gql`
`;

export default Launches;

我的 package.json 如下：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "3.0.0",
    "@reach/router": "^1.2.1",
    "@types/node": "^12.12.14",
    "@types/reach__router": "^1.2.6",
    "@types/react": "^16.9.15",
    "@types/react-dom": "^16.9.4",
    "apollo-cache-inmemory": "^1.6.2",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.15",
    "emotion": "^9.2.12",
    "graphql": "^14.4.2",
    "graphql-tag": "^2.10.1",
    "polished": "^3.4.1",
    "react": "^16.9.0-alpha.0",
    "react-dom": "^16.9.0-alpha.0",
    "react-emotion": "^9.2.12",
    "react-scripts": "^3.4.1",
    "typescript": "^3.7.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "run:ios-demo": "npx artillery run apollo-internal-demos/ios-workload.yml",
    "codegen": "apollo client:codegen --target typescript --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@apollo/react-testing": "3.0.0",
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^8.0.7",
    "@types/jest": "^24.0.23",
    "apollo": "^2.28.3",
    "artillery": "^1.6.0-26",
    "npm-watch": "^0.6.0"
  }
}

尝试使用节点 v14.4.0 和 v13.12.0，同样的错误。任何建议我做错了什么？谢谢。

【问题讨论】：

添加查询到LAUNCH_TILE_DATA 可能吗？
我不确定，这是我使用 GraphQL 的第一步，本教程没有涵盖它，所以我没有添加任何内容。将尝试与它一起玩。谢谢。

标签： reactjs typescript graphql apollo-client

【解决方案1】：

尝试命令 npx apollo-codegen introspect-schema http://localhost:4000/graphql --output ./types/schema.json 祝你好运！

【讨论】：