无法读取 Object.renderGraphiQL 中未定义的属性“startsWith”答案

【问题标题】：Cannot read property 'startsWith' of undefined at Object.renderGraphiQL无法读取 Object.renderGraphiQL 中未定义的属性“startsWith”
【发布时间】：2023-04-06 06:11:01
【问题描述】：

我正在阅读 udemy 的 GraphQL 教程，

https://www.udemy.com/introduction-to-graphql-and-apollo-building-modern-apis

我正在阅读操作 graphql 和 graphiql -> apollo -express - server 的指南。并得到了这个。视频中未定义此特定错误。这是一个免费的教程，第 9 课有这个。怎么办。我找不到解决办法。请帮忙。

TypeError: Cannot read property 'startsWith' of undefined
at Object.renderGraphiQL (/home/dell/Desktop/graphql- 
tutorial/node_modules/apollo-server-module- 
graphiql/src/renderGraphiQL.ts:48:17)
at Object. (/home/dell/Desktop/graphql-tutorial/node_modules/apollo- 
server-module-graphiql/src/resolveGraphiQLString.ts:62:10)
at step (/home/dell/Desktop/graphql-tutorial/node_modules/apollo- 
server-module-graphiql/dist/resolveGraphiQLString.js:32:23)
at Object.next (/home/dell/Desktop/graphql- 
tutorial/node_modules/apollo-server-module- 
graphiql/dist/resolveGraphiQLString.js:13:53)
at fulfilled (/home/dell/Desktop/graphql-tutorial/node_modules/apollo- 
server-module-graphiql/dist/resolveGraphiQLString.js:4:58)
 at 
 at process._tickDomainCallback (internal/process/next_tick.js:228:7)

renderGraphiQLString.js

这是它说有错误的行-->

 export function renderGraphiQL(data: GraphiQLData): string {
 const endpointURL = data.endpointURL;
 const endpointWs =
  endpointURL.startsWith('ws://') || endpointURL.startsWith('wss://');
  const subscriptionsEndpoint = data.subscriptionsEndpoint;
  const usingHttp = !endpointWs;
  const usingWs = endpointWs || !!subscriptionsEndpoint;
  const endpointURLWs =
  usingWs && (endpointWs ? endpointURL : subscriptionsEndpoint);

resolveGraphiQLString.js

 export async function resolveGraphiQLString(
 query: any = {},
 options: GraphiQLData | Function,
  ...args
  ): Promise<string> {
  const graphiqlParams = createGraphiQLParams(query);
  const graphiqlOptions = await resolveGraphiQLOptions(options, 
  ...args);
   const graphiqlData = createGraphiQLData(graphiqlParams, 
   graphiqlOptions);
   return renderGraphiQL(graphiqlData);
  }

server.js

 import express  from 'express';
 import {graphqlExpress,graphiqlExpress} from 'apollo-server-express';
 import bodyParser from 'body-parser';
 import schema  from './schema.js'


  const server = express();

  server.use('/graphql', bodyParser.json(), graphqlExpress(schema));

  server.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' 
   }));


 server.listen(4000,() =>{
 console.log('listening  on port 4000');
 });

【问题讨论】：

我在同一个教程的同一步骤上并遇到了这个确切的问题！

标签： express-graphql graphiql

【解决方案1】：

您的代码不正确。为了定义 graphiql 端点，您需要按以下方式执行此操作：

const server = express();
server.use('/graphql', bodyParser.json(), graphqlExpress(schema));
server.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));

请记住，您应该将真实 graphql 端点的 endpointURL 传递给 graphiqlExpress 方法。

干杯！

【讨论】：

嗨 daneil...我已经添加了 server.js 文件，并在其中编写了您的代码。使用此代码...（我以前也写过）..我遇到了同样的错误
确实不行，丹尼尔马丁内斯应该编辑他的答案

【解决方案2】：

我在做同样的教程，却遇到了同样的错误。我现在才开始工作。对我来说，我将endpointURL 拼写为endpointUrl，因为在驼峰式中将首字母缩写词大写对我来说似乎很愚蠢，但当然这是一个特定的键，它必须拼写正确。

对你来说，我在代码中看到的唯一区别是我认为你应该将{schema} 传递给graphqlExpress，但你只是传递了schema。所以这就是我的方式：

server.use("/graphql", bodyParser.json(), graphqlExpress({ schema }))

【讨论】：

你拯救了我的一天！非常感谢！