wip

Author: hasparus

src/app/api/contributors/route.ts

@@ -32,32 +32,25 @@ export async function GET(request: NextRequest) {
     const { searchParams } = new URL(request.url)
     const first = Math.max(
       1,
-      Math.min(100, parseInt(searchParams.get("first") || "20")),
+      Math.min(100, parseInt(searchParams.get("first") || "5")),
     )
     const after = searchParams.get("after") || ""
-    const repository = searchParams.get("repository") || ""
+    const project = searchParams.get("project") || ""
 
-    if (!repository) {
+    if (!project) {
       return NextResponse.json(
         {
           error: "Bad request",
           message: "Repository parameter is required",
         },
-        {
-          status: 400,
-          headers,
-        },
+        { status: 400, headers },
       )
     }
 
     const data = getContributorData()
-    const repositoryContributors = data[repository]
-
-    if (!repositoryContributors) {
-      return NextResponse.json([], { headers })
-    }
+    const allContributors = data[project] || []
 
-    const sortedContributors = [...repositoryContributors].sort((a, b) => {
+    const sortedContributors = allContributors.sort((a, b) => {
       if (b.contributions !== a.contributions) {
         return b.contributions - a.contributions
       }
@@ -85,10 +78,7 @@ export async function GET(request: NextRequest) {
         error: "Internal server error",
         message: "Failed to fetch contributors data",
       },
-      {
-        status: 500,
-        headers,
-      },
+      { status: 500, headers },
     )
   }
 }

src/components/index-page/how-it-works/schema.ts

@@ -6,6 +6,7 @@ import {
   GraphQLList,
   GraphQLInt,
   GraphQLID,
+  GraphQLError,
 } from "graphql"
 
 const PROJECT_NAME = "GraphQL"
@@ -27,18 +28,21 @@ const projects: Project[] = [
   {
     name: PROJECT_NAME,
     tagline: PROJECT_TAGLINE,
+    contributors: [],
   },
   {
     name: "GraphiQL",
     tagline: "Ecosystem for building browser & IDE tools.",
+    contributors: [],
   },
   {
     name: "graphql-js",
     tagline: "A reference implementation of GraphQL for JavaScript",
+    contributors: [],
   },
 ]
 
-interface User {
+interface Contributor {
   id: string
   website?: string | null
   contributions: number
@@ -47,14 +51,15 @@ interface User {
 interface Project {
   name: string
   tagline: string
+  contributors: Contributor[]
 }
 
 interface PaginationArgs {
   first?: number | null
   after?: string | null
 }
 
-const UserType = new GraphQLObjectType<User>({
+const UserType = new GraphQLObjectType<Contributor>({
   name: "User",
   fields: {
     id: {
@@ -96,11 +101,26 @@ const ProjectType = new GraphQLObjectType<Project>({
           description: "Cursor (User.id) after which to start",
         },
       },
-      resolve: (project, args) => {
-        return getContributorsForProject(project, {
-          first: args?.first,
-          after: args?.after ?? null,
-        })
+      resolve: async (project, args: PaginationArgs) => {
+        try {
+          const params = new URLSearchParams()
+
+          if (args.first) params.set("first", args.first.toString())
+          if (args.after) params.set("after", args.after)
+          params.set("project", project.name)
+
+          const response = await fetch(`/api/contributors?${params.toString()}`)
+
+          if (!response.ok) {
+            console.error(`Failed to fetch contributors: ${response.status}`)
+            return []
+          }
+
+          return response.json()
+        } catch (error) {
+          console.error("Error fetching contributors:", error)
+          return []
+        }
       },
     },
   },
@@ -118,9 +138,17 @@ const QueryType = new GraphQLObjectType({
         },
       },
       resolve: (_, args) => {
-        return projects.find(
+        const project = projects.find(
           project => project.name.toLowerCase() === args.name.toLowerCase(),
         )
+
+        if (!project) {
+          throw new GraphQLError(
+            "To learn about more GraphQL projects, visit graphql.org/code/ or github.com/topics/graphql. In this playground, try 'GraphiQL', 'graphql-js' or 'graphiql'.",
+          )
+        }
+
+        return project
       },
     },
     projects: {
@@ -131,40 +159,6 @@ const QueryType = new GraphQLObjectType({
   },
 })
 
-async function getContributorsForProject(
-  project: Project,
-  args: PaginationArgs,
-): Promise<User[]> {
-  try {
-    const params = new URLSearchParams()
-
-    if (args.first) {
-      params.set("first", args.first.toString())
-    }
-
-    if (args.after) {
-      params.set("after", args.after)
-    }
-
-    params.set("repository", project.name)
-
-    const response = await fetch(`/api/contributors?${params.toString()}`)
-
-    if (!response.ok) {
-      console.error(`Failed to fetch contributors: ${response.status}`)
-      return []
-    }
-
-    const contributors: User[] = await response.json()
-
-    // Map contributors to User format (they have the same structure now)
-    return contributors
-  } catch (error) {
-    console.error("Error fetching contributors:", error)
-    return []
-  }
-}
-
 export const projectsSchema = new GraphQLSchema({
   query: QueryType,
 })

src/components/index-page/what-is-graphql/wires.tsx

@@ -555,6 +555,7 @@ export function Wires({ className }: { className?: string }) {
         <SVGDefinitions />
       </svg>
 
+      {/* TODO: This needs to be turned on in Safari as it doesn't support repeatEvent. */}
       {process.env.NODE_ENV === "development" && (
         <NextStepButton onClick={inc} />
       )}

src/components/interactive-code-block/result-viewer.tsx

@@ -64,7 +64,12 @@ export class ResultViewer extends Component<ResultViewerProps> {
     if (this.props.vainlyExtractData) {
       try {
         const json = JSON.parse(value)
-        if (json && typeof json === "object" && "data" in json) {
+        if (
+          json &&
+          typeof json === "object" &&
+          "data" in json &&
+          !("errors" in json)
+        ) {
           value = JSON.stringify(json.data, null, 2)
         }
       } catch {
@@ -84,6 +89,7 @@ export class ResultViewer extends Component<ResultViewerProps> {
   render() {
     return (
       <div
+        // eslint-disable-next-line tailwindcss/no-custom-classname
         className="result-window h-full"
         ref={e => {
           this.domNode = e