2025.02.16 graphql support

Author: maslianok

.graphqlrc.yml

@@ -0,0 +1,4 @@
+projects:
+  web:
+    schema: './generated/schema.graphql'
+    documents: '**/*.gql'

app/api/graphql/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { query, variables } = await req.json();
+
+    const graphqlRes = await fetch(process.env.GRAPHQL_URI!, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': process.env.GRAPHQL_SECRET_KEY!,
+      },
+      body: JSON.stringify({ query, variables }),
+    });
+
+    // Stream or parse the response back to the client
+    const data = await graphqlRes.json();
+    return NextResponse.json(data, { status: graphqlRes.status });
+  } catch {
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

app/by/owned-stars/page.tsx

@@ -0,0 +1,40 @@
+import { graphqlRequest } from '@/lib/graphql-request';
+import { StarsRankingDocument } from '@/types/generated/graphql';
+import Image from 'next/image';
+
+export default async function OwnedStarsRanking() {
+  const data = await graphqlRequest(StarsRankingDocument);
+
+  return (
+    <table className="table-auto">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th></th>
+          <th>Login</th>
+          <th>Location</th>
+          <th>⭐</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.globalRanks.map((rank) => (
+          <tr key={rank.githubId}>
+            <td>{rank.ownedStars}</td>
+            <td>
+              <Image
+                src={rank.user?.avatarUrl}
+                width={36}
+                height={36}
+                className="rounded-full m-2"
+                alt={`${rank.user?.login}'s avatar`}
+              />
+            </td>
+            <td>{rank.user?.login}</td>
+            <td>{rank.user?.location}</td>
+            <td>{rank.user?.ownedStars}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

app/by/owned-stars/stars-ranking.gql

@@ -0,0 +1,13 @@
+query StarsRanking {
+  globalRanks(order: STARS_OWNED) {
+    githubId
+    ownedStars
+    user {
+      githubId
+      login
+      avatarUrl
+      ownedStars
+      location
+    }
+  }
+}

codegen.ts

@@ -0,0 +1,27 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: {
+    [process.env.GRAPHQL_URI!]: {
+      headers: {
+        'x-api-key': process.env.GRAPHQL_SECRET_KEY!,
+      },
+    },
+  },
+  documents: ['**/*.gql'],
+  // ignoreNoDocuments: true, // for better experience with the watcher
+  generates: {
+    './types/generated/graphql.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typed-document-node'],
+      config: {
+        // Instruct Codegen to import your custom TypedDocumentNode
+        documentNodeImport: '../typed-document-node',
+      },
+    },
+    './types/generated/schema.graphql': {
+      plugins: ['schema-ast'],
+    },
+  },
+};
+
+export default config;

lib/graphql-request.ts

@@ -0,0 +1,24 @@
+import DocumentNode from '@/types/typed-document-node';
+import { print } from 'graphql';
+
+export async function graphqlRequest<TData, TVariables>(
+  document: DocumentNode<TData, TVariables>,
+  variables?: TVariables,
+): Promise<TData> {
+  const query = print(document);
+
+  const res = await fetch(`${process.env.URI}/api/graphql`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  const json = await res.json();
+
+  // If your API returns `{"data": ... }`, cast `json.data` to TData
+  if (json.errors) {
+    throw new Error(JSON.stringify(json.errors));
+  }
+
+  return json.data as TData;
+}

next.config.ts

@@ -1,7 +1,14 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
+    ],
+  },
 };
 
 export default nextConfig;