Add a GraphQL API using Fuse

[mxstbr]

Summary

This sets up a GraphQL API for next-ai-news using Fuse.

Instead of having database queries in the server components directly, this introduces a central data layer that can be used across server- and client components to resolve data.

This, of course, adds additional complexity & code by introducing an extra layer in the architecture. Whether that additional layer is worth the overhead really depends on the goals of this project; I cannot make that tradeoff decision.

Implementation notes

1. The data layer is defined in the types/ folder, mostly in the types/Story.ts node
2. The API's schema (see the generated schema.graphql) matches the underlying database schema
   1. …except for adding a User node and exposing a stories submitter centrally as Story.submitter, whether it's AI generated or from an authenticated user (i.e. story.submitted_by ?? story.username only exists once in the API layer and is opaque to the client)
3. In server components, data is resolved in-process without a network hop
   1. execute runs GraphQL resolution in-process so the data gets resolved from the server rendering process immediately
4. The API is accessible for client components via an API route at /api/fuse
   1. Components define their data requirements the same way whether they are eventually resolved in-process (with execute) or via the API route (with useQuery)
   2. Currently, there are no client components that request data, so we could remove the API route entirely if wanted.
5. Everything is type-safe from the Drizzle db queries to the client components and I kept the client code as similar as possible with minimal changes
6. I changed the individual story URLs from story.id.replace(/^story_/, "") to Fuse's opaque unique IDs for simpler client logic and better client caching.
   1. I can implement the URLs to stay consistent if necessary.
7. Fuse's Next.js plugin doesn't work with Turbopack due to a difference in Turbopack's module resolution compared to webpack/vite, so removed --turbo from next dev for now

Local development

Everything about local development stays the same as before: next dev. The only additional step is that when first opening this code in VSCode, you need to CMD+Shift+P, "TypeScript: Select TypeScript Version…" and select "Use Workspace Version" to enable GraphQLSP and get type auto-completion for GraphQL queries on the client:

One of the deep dependencies throws a strange webpack parsing error. This error does not impact any functionality however I haven't found a way to silence it either. We can dig further into this.

Todo

• Move homepage to fetch data via the GraphQL layer
• Implement pagination on the homepage
• Move individual story page to fetch data via the GraphQL layer
• Implement mutations for actions

[vercel]

@mxstbr is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.