Cannot read property 'startsWith' of undefined at Object.renderGraphiQL - express-graphql

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

Answer 1

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

Answer 2

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!