From 4fb80635157e981ea844e4939e0c2adf6cc94659 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Wed, 29 Mar 2023 19:19:54 +1100 Subject: [PATCH 1/2] chore: remove graphiql feature flag --- .../layouts/DocsLayout/DocsLayout.tsx | 6 +-- .../layouts/DocsLayout/DocsLayout.utils.tsx | 47 ++++++++----------- 2 files changed, 22 insertions(+), 31 deletions(-) diff --git a/studio/components/layouts/DocsLayout/DocsLayout.tsx b/studio/components/layouts/DocsLayout/DocsLayout.tsx index 4a1a2addce8..f4d677f2669 100644 --- a/studio/components/layouts/DocsLayout/DocsLayout.tsx +++ b/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={ } > diff --git a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx index 9ac8f17a505..8f74b748afe 100644 --- a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx +++ b/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: ( - - code.replace(/svg/, 'svg class="m-auto text-color-inherit"') - } - /> - ), - items: [], - }, - ], - }, - ] - : []), + { + title: 'GraphQL', + items: [ + { + name: 'GraphiQL', + key: 'graphiql', + url: `/project/${ref}/api/graphiql`, + icon: ( + code.replace(/svg/, 'svg class="m-auto text-color-inherit"')} + /> + ), + items: [], + }, + ], + }, { title: 'More Resources', items: [ From 8f525fdc0172f2ae001c5e0ccd3fae11931537f5 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Wed, 29 Mar 2023 19:52:29 +1100 Subject: [PATCH 2/2] fix: graphiql on self-hosted --- .../pages/api/projects/[ref]/api/graphql.ts | 40 +++++++++++++++++++ studio/pages/project/[ref]/api/graphiql.tsx | 14 +++---- 2 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 studio/pages/api/projects/[ref]/api/graphql.ts diff --git a/studio/pages/api/projects/[ref]/api/graphql.ts b/studio/pages/api/projects/[ref]/api/graphql.ts new file mode 100644 index 00000000000..73f206a218c --- /dev/null +++ b/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' } }) +} diff --git a/studio/pages/project/[ref]/api/graphiql.tsx b/studio/pages/project/[ref]/api/graphiql.tsx index 02843ee891b..5317b8e57eb 100644 --- a/studio/pages/project/[ref]/api/graphiql.tsx +++ b/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 } if (pgGraphqlExtension?.installed_version === null) { return ( -
-
+
+
-

Enable the GraphQL Extension

-

+

Enable the GraphQL Extension

+

Toggle the switch below to enable the GraphQL extension. You can then use the GraphQL API with your Supabase Database.