feat: add api key to GraphQL (#164)

Author: luizstacio

packages/app-explorer/.env.example

@@ -1 +1,4 @@
 FUEL_PROVIDER=https://beta-5.fuel.network/graphql
+# Explorer API URL
+FUEL_EXPLORER_API=
+FUEL_EXPLORER_API_KEY=

packages/app-explorer/.env.production

@@ -1,6 +1,7 @@
 import { createExecutor, createSchema } from '@fuel-explorer/graphql';
 import { ContextDomain } from '@fuel-explorer/graphql/src/domains/Context';
 import { createYoga } from 'graphql-yoga';
+import { NextResponse } from 'next/server';
 import { requireEnv } from '~/systems/utils/requireEnv';
 
 const { FUEL_PROVIDER: url } = requireEnv(['FUEL_PROVIDER']);
@@ -29,8 +30,17 @@ const { handleRequest } = createYoga({
   },
 });
 
+const authenticatiohMiddleware = async (request: Request, ctx: Object) => {
+  if (process.env.FUEL_EXPLORER_API) {
+    return new NextResponse('Unauthorized', {
+      status: 401,
+    });
+  }
+  return handleRequest(request, ctx);
+};
+
 export {
-  handleRequest as GET,
-  handleRequest as POST,
-  handleRequest as OPTIONS,
+  authenticatiohMiddleware as GET,
+  authenticatiohMiddleware as POST,
+  authenticatiohMiddleware as OPTIONS,
 };

packages/app-explorer/src/app/api/graphql/route.ts

@@ -1,16 +1,27 @@
 import { resolve } from 'url';
-import { getSdk } from '@fuel-explorer/graphql';
+import { getSdk } from '@fuel-explorer/graphql/src/sdk';
 import { GraphQLClient } from 'graphql-request';
 
+const { FUEL_EXPLORER_API, FUEL_EXPLORER_API_KEY } = process.env;
 const VERCEL_URL = process.env.VERCEL_URL || process.env.NEXT_PUBLIC_VERCEL_URL;
 const VERCEL_ENV =
   process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV || 'development';
 
 const getBaseUrl = () => {
-  if (VERCEL_ENV !== 'development') return `https://${VERCEL_URL}`;
-  return 'http://localhost:3000';
+  if (FUEL_EXPLORER_API && FUEL_EXPLORER_API_KEY) return FUEL_EXPLORER_API;
+  if (VERCEL_ENV !== 'development')
+    return resolve(`https://${VERCEL_URL}`, '/api/graphql');
+  return 'http://localhost:3000/api/graphql';
+};
+const getHeaders = () => {
+  if (FUEL_EXPLORER_API_KEY) {
+    return { Authorization: `Bearer ${FUEL_EXPLORER_API_KEY}` };
+  }
+  return undefined;
 };
 
-const API_URL = resolve(getBaseUrl(), '/api/graphql');
-const client = new GraphQLClient(API_URL, { fetch });
+const client = new GraphQLClient(getBaseUrl(), {
+  fetch,
+  headers: getHeaders(),
+});
 export const sdk = getSdk(client);

packages/app-explorer/src/systems/Core/utils/sdk.ts

@@ -1,9 +1,9 @@
-import { ReceiptType } from '@fuel-explorer/graphql';
+import { ReceiptType } from '@fuel-explorer/graphql/src/sdk';
 import type {
   Maybe,
   OperationReceipt,
   TransactionReceiptFragment,
-} from '@fuel-explorer/graphql';
+} from '@fuel-explorer/graphql/src/sdk';
 import type { BaseProps } from '@fuels/ui';
 import {
   Address,

packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx

@@ -14,6 +14,7 @@ import { IconGasStation } from '@tabler/icons-react';
 import Link from 'next/link';
 import { Routes } from '~/routes';
 
+import { isValidAddress } from '~/systems/Core/utils/address';
 import { TX_INTENT_MAP } from '../../../Transaction/component/TxIcon/TxIcon';
 import type { TransactionNode } from '../../../Transaction/types';
 
@@ -29,9 +30,10 @@ export function TxCard({
   ...props
 }: TxCardProps) {
   const fee = bn(tx.fee);
+  const isValidTxID = isValidAddress(tx.id);
 
   return (
-    <Link scroll={true} href={Routes.txSimple(tx.id)}>
+    <Link scroll={true} href={Routes.txSimple(tx.id)} prefetch={isValidTxID}>
       <Card {...props} className={cx(className)}>
         <Card.Body className="flex flex-col gap-4 laptop:flex-row laptop:justify-between">
           <Box className="flex gap-3 h-[26px]">

packages/app-explorer/src/systems/Transactions/components/TxCard/TxCard.tsx

@@ -1,3 +1,4 @@
 node_moduels
 .turbo
 dist
+.env

packages/graphql/.dockerignore

@@ -3,7 +3,13 @@ import type { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   overwrite: true,
   documents: ['./src/queries/**.graphql'],
-  schema: `http://localhost:${process.env.SERVER_PORT}/graphql`,
+  schema: {
+    [`http://localhost:${process.env.SERVER_PORT}/graphql`]: {
+      headers: {
+        Authorization: `Bearer ${process.env.FUEL_EXPLORER_API_KEY}`,
+      },
+    },
+  },
   generates: {
     'src/generated/types.ts': {
       plugins: [

packages/graphql/codegen.ts

@@ -0,0 +1 @@
+export * from './generated/types';

packages/graphql/src/sdk.ts

@@ -11,13 +11,24 @@ import { requireEnv } from './utils/requireEnv';
 const { FUEL_PROVIDER } = requireEnv([
   ['FUEL_PROVIDER', 'https://beta-5.fuel.network/graphql'],
 ]);
+const { FUEL_EXPLORER_API_KEY } = process.env;
 
 // Create a server:
 const app = express();
 
 app.use(cors<cors.CorsRequest>());
 app.use(express.json());
 
+if (FUEL_EXPLORER_API_KEY) {
+  app.use((req, res, next) => {
+    if (req.headers.authorization !== `Bearer ${FUEL_EXPLORER_API_KEY}`) {
+      res.status(401).send('Unauthorized');
+      return;
+    }
+    next();
+  });
+}
+
 app.get(
   '/graphql',
   expressPlayground({