Merge pull request #13289 from supabase/chore/remove-graphiql-flag

chore: remove graphiql feature flag

studio/components/layouts/DocsLayout/DocsLayout.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 
-import { useFlag, useStore, withAuth } from 'hooks'
+import { useStore, withAuth } from 'hooks'
 import Error from 'components/ui/Error'
 import ProductMenu from 'components/ui/ProductMenu'
 import ProjectLayout from 'components/layouts/ProjectLayout/ProjectLayout'
@@ -13,8 +13,6 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement
   const { meta, ui } = useStore()
   const { data, isLoading, error } = meta.openApi
 
-  const graphiql = useFlag('graphiql')
-
   const getPage = () => {
     if (router.pathname.endsWith('graphiql')) return 'graphiql'
 
@@ -49,7 +47,7 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement
       productMenu={
         <ProductMenu
           page={getPage()}
-          menu={generateDocsMenu(projectRef, tableNames, functionNames, graphiql)}
+          menu={generateDocsMenu(projectRef, tableNames, functionNames)}
         />
       }
     >

studio/components/layouts/DocsLayout/DocsLayout.utils.tsx

@@ -6,8 +6,7 @@ import { BASE_PATH } from 'lib/constants'
 export const generateDocsMenu = (
   ref: string,
   tables: string[],
-  functions: string[],
-  showGraphiql: boolean
+  functions: string[]
 ): ProductMenuGroup[] => {
   return [
     {
@@ -61,31 +60,25 @@ export const generateDocsMenu = (
         }),
       ],
     },
-    ...(showGraphiql
-      ? [
-          {
-            title: 'GraphQL',
-            items: [
-              {
-                name: 'GraphiQL',
-                key: 'graphiql',
-                url: `/project/${ref}/api/graphiql`,
-                icon: (
-                  <SVG
-                    src={`${BASE_PATH}/img/graphql.svg`}
-                    style={{ width: `${16}px`, height: `${16}px` }}
-                    className="text-scale-1200"
-                    preProcessor={(code) =>
-                      code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
-                    }
-                  />
-                ),
-                items: [],
-              },
-            ],
-          },
-        ]
-      : []),
+    {
+      title: 'GraphQL',
+      items: [
+        {
+          name: 'GraphiQL',
+          key: 'graphiql',
+          url: `/project/${ref}/api/graphiql`,
+          icon: (
+            <SVG
+              src={`${BASE_PATH}/img/graphql.svg`}
+              style={{ width: `${16}px`, height: `${16}px` }}
+              className="text-scale-1200"
+              preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
+            />
+          ),
+          items: [],
+        },
+      ],
+    },
     {
       title: 'More Resources',
       items: [

studio/pages/api/projects/[ref]/api/graphql.ts

@@ -0,0 +1,40 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import apiWrapper from 'lib/api/apiWrapper'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'POST':
+      return handleGet(req, res)
+
+    default:
+      res.setHeader('Allow', ['POST'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse) => {
+  const authorizationHeader = req.headers['x-graphql-authorization']
+
+  const response = await fetch(`${process.env.SUPABASE_URL}/graphql/v1`, {
+    method: 'POST',
+    headers: {
+      apikey: process.env.SUPABASE_SERVICE_KEY!,
+      Authorization:
+        (Array.isArray(authorizationHeader) ? authorizationHeader[0] : authorizationHeader) ??
+        `Bearer ${process.env.SUPABASE_ANON_KEY}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(req.body),
+  })
+  if (response.ok) {
+    const data = await response.json()
+
+    return res.status(200).json(data)
+  }
+
+  return res.status(500).json({ error: { message: 'Internal Server Error' } })
+}

studio/pages/project/[ref]/api/graphiql.tsx

@@ -4,7 +4,7 @@ import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
 
 import { NextPageWithLayout } from 'types'
 import { useParams, useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
+import { API_URL, IS_PLATFORM } from 'lib/constants'
 import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
 import { DocsLayout } from 'components/layouts'
@@ -19,7 +19,7 @@ const GraphiQLPage: NextPageWithLayout = () => {
   const isExtensionsLoading = meta.extensions.isLoading
   const pgGraphqlExtension = meta.extensions.byId('pg_graphql')
 
-  const { data: accessToken } = useSessionAccessTokenQuery()
+  const { data: accessToken } = useSessionAccessTokenQuery({ enabled: IS_PLATFORM })
   const { data: settings, isFetched } = useProjectApiQuery({ projectRef })
 
   const apiService = settings?.autoApiService
@@ -54,17 +54,17 @@ const GraphiQLPage: NextPageWithLayout = () => {
     return customFetcher
   }, [graphqlUrl, accessToken])
 
-  if (!accessToken || !isFetched || (isExtensionsLoading && !pgGraphqlExtension)) {
+  if ((IS_PLATFORM && !accessToken) || !isFetched || (isExtensionsLoading && !pgGraphqlExtension)) {
     return <Connecting />
   }
 
   if (pgGraphqlExtension?.installed_version === null) {
     return (
-      <div className="flex-1 flex flex-col justify-center items-center px-4">
-        <div className="max-w-md w-full">
+      <div className="flex flex-col items-center justify-center flex-1 px-4">
+        <div className="w-full max-w-md">
           <div className="mb-6">
-            <h1 className="text-2xl mt-8 mb-2">Enable the GraphQL Extension</h1>
-            <h2 className="text-scale-1100 text-sm">
+            <h1 className="mt-8 mb-2 text-2xl">Enable the GraphQL Extension</h1>
+            <h2 className="text-sm text-scale-1100">
               Toggle the switch below to enable the GraphQL extension. You can then use the GraphQL
               API with your Supabase Database.
             </h2>