Here is the stack I'm working with:
Apollo Server, graphql, prisma, nextjs
I've set up a resolver.ts and schema.ts for my graphql configuration under /graphql
resolver.ts
export const resolvers = {
Query: {
books: () => books,
},
};
const books = [
{
title: 'The Awakening',
author: 'Kate Chopin',
},
{
title: 'City of Glass',
author: 'Paul Auster',
},
];
schema.ts
import { gql } from "apollo-server-micro";
export const typeDefs = gql`
# This "Book" type defines the queryable fields for every book in our data source.
type Book {
title: String
author: String
}
# The "Query" type is special: it lists all of the available queries that
# clients can execute, along with the return type for each. In this
# case, the "books" query returns an array of zero or more Books (defined above).
type Query {
books: [Book]
}
/pages/api/graphql.ts
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { ApolloServer } from 'apollo-server-micro';
import { typeDefs } from '../../graphql/schema';
import { resolvers } from '../../graphql/resolver';
const apolloServer = new ApolloServer ({typeDefs, resolvers});
const startServer = apolloServer.start();
export default async function handler(req, res) {
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader(
'Access-Control-Allow-Origin',
'https://studio.apollographql.com'
);
res.setHeader(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
if (req.method === 'OPTIONS') {
res.end();
return false;
}
await startServer;
await apolloServer.createHandler({
path: "/api/graphql",
})(req, res);
}
export const config = {
api: {
bodyParse: false
}
}
When I access my api endpoint /api/graphql it redirects me to the apollo studio explorer but fails to recognize the endpoint or the schema. The errors shown in the development tools don't provide much insight:
StaleWhileRevalidate.js:112 Uncaught (in promise) no-response: no-response :: [{"url":"https://cdn.segment.com/analytics.js/v1/xPczztcxJ39mG3oX3wle6XlgpwJ62XAA/analytics.min.js"}]
at O._handle (https://studio.apollographql.com/service-worker.js:2:71211)
at async O._getResponse (https://studio.apollographql.com/service-worker.js:2:47966)
_handle @ StaleWhileRevalidate.js:112
useTelemetryInitializer.ts:174 GET https://cdn.segment.com/analytics.js/v1/xPczztcxJ39mG3oX3wle6XlgpwJ62XAA/analytics.min.js net::ERR_FAILED
I suspect the issue does not pertain to prisma as I have only configured a postgresql database and defined some basic schema. It's unclear why the studio isn't recognizing my endpoint, and there are no cross-origin errors suggesting a CORS issue.
Studio screenshot: