Cannot read property 'startsWith' of undefined at Object.renderGraphiQL

Question

i was going through a GraphQL tutorial from udemy,

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

And i was going through the guide to operating graphql and graphiql -> apollo -express - server. And got this. This particular error has not been defined in the videos. It is a free tutorial and lecture 9 has this. Wht to do. i find no solution. Please help.

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

This is the line it says has error -->

 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');
 });

I'm on the same step on the same tutorial and hit this exact issue! — redOctober13, May 17 '18 at 18:24

score 6 · Answer 1 · answered May 17 '18 at 18:39

I was doing the same tutorial and got stuck with the same error. I just now got it working. For me, I had spelled endpointURL as endpointUrl because it seems stupid to me to capitalize acronyms within camel-case, but of course this being a specific key, it has to be spelled right.

For you, the only difference I see in the code is that I think you should pass {schema} to graphqlExpress, but you're passing just schema. So here's how I have it:

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

You save my day! Thank you a lot! – simhumileco Aug 27 '19 at 14:20 — simhumileco, Aug 27 '19 at 14:20

score -1 · Answer 2 · answered May 05 '18 at 11:11

-1

Your code is not correct. In order to define the graphiql endpoint you need to do this in the following way:

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

Keep in mind you should pass to the graphiqlExpress method the endpointURL of your real graphql endpoint.

Cheers!

answered May 05 '18 at 11:11

Daniel Martinez

9
2

1

hi daneil...i have added the server.js file and in it i have written your code. With this code ...(this i had written previously also).. i am getting the same error – May 05 '18 at 11:50
It indeed does not work, Daniel Martinez should edit his answer – Bert Verhees Mar 21 '19 at 11:01

Cannot read property 'startsWith' of undefined at Object.renderGraphiQL

2 Answers2