configured GQL Playground for Production

src/app/api/graphql/route.js

@@ -1,49 +1,61 @@
-import { startServerAndCreateNextHandler } from '@as-integrations/next';
-import { ApolloServer } from '@apollo/server';
-import { gql } from 'graphql-tag';
-import { MongoClient } from 'mongodb';
+import { startServerAndCreateNextHandler } from '@as-integrations/next'
+import { ApolloServer } from '@apollo/server'
+import {
+  ApolloServerPluginLandingPageLocalDefault,
+  ApolloServerPluginLandingPageProductionDefault 
+} from '@apollo/server/plugin/landingPage/default';
+import { gql } from 'graphql-tag'
+import { MongoClient } from 'mongodb'
 
 // The connection string for mongodb connection.
-const uri = "mongodb+srv://ayushtiwari110:[email protected]/";
-const client = new MongoClient(uri);
+const uri =
+  'mongodb+srv://ayushtiwari110:[email protected]/'
+const client = new MongoClient(uri)
 
 async function getUniversityName(id) {
-    try {
-      const database = client.db('bacpac');
-      const universities = database.collection('universities');
-      const university = await universities.findOne({ id });
-      return university.name;
-    } finally {
-      // Ensures that the client will close when you finish/error
-      await client.close();
-    }
+  try {
+    const database = client.db('bacpac')
+    const universities = database.collection('universities')
+    const university = await universities.findOne({ id })
+    return university.name
+  } finally {
+    // Ensures that the client will close when you finish/error
+    await client.close()
   }
+}
 
 const resolvers = {
   Query: {
-    university_name: async (_,args) => {
-        return await getUniversityName(args.id);
-    }
+    university_name: async (_, args) => {
+      return await getUniversityName(args.id)
+    },
   },
-};
+}
 
 const typeDefs = gql`
   type Query {
     hello: String
-    university_name (id: ID!): String
+    university_name(id: ID!): String
   }
   type Name {
     name: String
   }
-`;
+`
+
+let plugins = [];
+//Next.js auto assigns NODE_ENV value as development for 'next dev' command, and production for other commands
+if (process.env.NODE_ENV === 'production') {
+  plugins = [ApolloServerPluginLandingPageProductionDefault({ embed: true, graphRef: 'bacpac-gql@current' })]
+} else {
+  plugins = [ApolloServerPluginLandingPageLocalDefault({ embed: true })]
+}
 
 const server = new ApolloServer({
   resolvers,
   typeDefs,
-});
-
-
+  plugins,
+})
 
-const handler = startServerAndCreateNextHandler(server);
+const handler = startServerAndCreateNextHandler(server)
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST }