chore: add graphql internally on nextjs (#53)

Author: pedronauck

.lintstagedrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  '**/*.(md|mdx|json|yml|yaml|html|css)': ['prettier --write'],
+  '**/*.(md|mdx|json|html|css)': ['prettier --write'],
   '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix'],
   '.{ts,tsx}': ['tsc --noEmit'],
 };

.prettierignore

@@ -19,3 +19,4 @@ storybook-static
 pnpm-lock.yaml
 .next
 graphql.schema.json
+heml

package.json

@@ -60,12 +60,11 @@
   },
   "devDependencies": {
     "@fuels/tsup-config": "^0.0.11",
+    "@next/eslint-plugin-next": "^13.5.3",
     "@swc/core": "1.3.89",
     "@swc/jest": "0.2.29",
     "@types/jest": "29.5.5",
     "@types/node": "20.7.0",
-    "deepmerge-json": "1.5.0",
-    "@next/eslint-plugin-next": "^13.5.3",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "eslint": "^8.50.0",
@@ -83,6 +82,7 @@
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
+    "ts-node": "10.9.1",
     "tsup": "7.2.0",
     "turbo": "^1.10.14",
     "typescript": "5.2.2",

packages/app/.env.example

@@ -1,2 +1,3 @@
-GRAPHQL_API=http://beta-4.fuel.network/graphql
+FUEL_PROVIDER_URL=http://beta-4.fuel.network/graphql
+
 

packages/app/.env.production

@@ -0,0 +1,2 @@
+FUEL_PROVIDER_URL=http://beta-4.fuel.network/graphql
+

packages/app/.gitignore

@@ -1,2 +1,3 @@
 public/storybook
 public/ui
+src/graphql/generated

packages/app/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

packages/app/next.config.mjs

@@ -2,10 +2,20 @@
 const config = {
   reactStrictMode: true,
   swcMinify: true,
+  transpilePackages: ['@fuel-explorer/graphql'],
   experimental: {
     externalDir: true,
-    serverComponentsExternalPackages: ['bcryptjs'],
+    serverComponentsExternalPackages: [
+      'bcryptjs',
+      '@graphql-tools/delegate',
+      '@graphql-tools/load',
+      '@graphql-tools/schema',
+      '@graphql-tools/stitch',
+      '@graphql-tools/url-loader',
+      '@graphql-tools/utils',
+    ],
     serverActions: true,
+    esmExternals: true,
   },
   /** We run eslint as a separate task in CI */
   eslint: {
@@ -19,7 +29,7 @@ const config = {
       ? [
           {
             source: '/graphql',
-            destination: process.env.GRAPHQL_API,
+            destination: '/api/graphql',
           },
         ]
       : [];
@@ -38,6 +48,15 @@ const config = {
       },
     ];
   },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(graphql|gql)/,
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    });
+
+    return config;
+  },
 };
 
 export default config;

packages/app/package.json

@@ -27,10 +27,14 @@
     "dayjs": "1.11.10",
     "framer-motion": "10.16.4",
     "fuels": "0.59.0",
+    "graphql": "16.8.1",
     "graphql-request": "6.1.0",
+    "graphql-tag": "2.12.6",
+    "graphql-yoga": "4.0.4",
     "next": "13.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tai64": "1.0.0",
     "tailwind-merge": "1.14.0",
     "tailwind-variants": "0.1.14",
     "zod": "3.22.2",

packages/app/src/graphql.d.ts

@@ -0,0 +1,5 @@
+declare module '*.graphql' {
+  import type { DocumentNode } from 'graphql';
+  const Schema: DocumentNode;
+  export = Schema;
+}

packages/app/src/pages/api/graphql.ts

@@ -0,0 +1,17 @@
+import { createSchema } from '@fuel-explorer/graphql';
+import { createYoga } from 'graphql-yoga';
+
+export const config = {
+  api: {
+    // Disable body parsing (required for file uploads)
+    bodyParser: false,
+  },
+};
+
+const schema = createSchema(process.env.FUEL_PROVIDER_URL!);
+
+export default createYoga({
+  schema,
+  // Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql`
+  graphqlEndpoint: '/api/graphql',
+});

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

@@ -1,5 +1,16 @@
 import { getSdk } from '@fuel-explorer/graphql';
 import { GraphQLClient } from 'graphql-request';
+import { resolve } from 'url';
 
-const graphql = new GraphQLClient(process.env.GRAPHQL_API!);
-export const sdk = getSdk(graphql);
+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';
+};
+
+const API_URL = resolve(getBaseUrl(), '/api/graphql');
+const client = new GraphQLClient(API_URL);
+export const sdk = getSdk(client);

packages/app/src/systems/Transaction/component/__mocks__/tx.ts

@@ -0,0 +1,26 @@
+import { mocks } from '@fuel-explorer/graphql';
+import { bn } from '@fuel-ts/math';
+import { dayjs } from '~/systems/Core/utils/dayjs';
+
+const status = mocks.aSuccessStatus({
+  __typename: 'SuccessStatus',
+  block: mocks.aBlock({
+    transactions: [],
+  }),
+});
+
+const date = dayjs().subtract(1, 'day');
+
+export const TX_MOCK = mocks.aTransaction({
+  id: '0x78d13f111bf301324f34f2a7eaffc546d39598d156af38e7c4ef9fe61ea2c46a',
+  time: {
+    __typename: 'ParsedTime',
+    fromNow: date.fromNow(),
+    full: dayjs().format('DD MMM YYYY - HH:mm:ss A'),
+  },
+  totalAccounts: 2,
+  totalAssets: 3,
+  totalOperations: 4,
+  gasUsed: bn(1),
+  status,
+});

packages/app/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "allowJs": true,
     "noEmit": true,
     "lib": ["dom"],
@@ -17,11 +21,13 @@
       "@react-aria/interactions": [
         "../../node_modules/@react-aria/interactions"
       ]
-    }
+    },
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
     ".next/types/**/*.ts",
+    "./src/generated",
     "src",
     ".storybook",
     "*.config.*"

packages/graphql/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "plugins": ["import-graphql"]
+}

packages/graphql/.env.example

@@ -1 +1 @@
-FUEL_PROVIDER_URL=http://beta-4.fuel.network/graphql
+FUEL_PROVIDER_URL=http://beta-4.fuel.network/graphql

packages/graphql/codegen.ts

@@ -5,7 +5,7 @@ const config: CodegenConfig = {
   schema: './src/schemas/fullschema.graphql',
   documents: ['./src/queries/**.graphql'],
   generates: {
-    'src/generated/graphql.ts': {
+    'src/generated/types.ts': {
       plugins: [
         'typescript',
         'typescript-operations',
@@ -21,7 +21,7 @@ const config: CodegenConfig = {
       plugins: ['typescript-mock-data'],
       config: {
         addTypename: true,
-        typesFile: './graphql.ts',
+        typesFile: './types.ts',
         typesNames: 'keep',
         scalars: {
           Tai64Timestamp: 'unix_time',