在Next.js项目中集成GraphQL-Nexus的完整指南-优快云博客

在Next.js项目中集成GraphQL-Nexus的完整指南

nexus Code-First, Type-Safe, GraphQL Schema Construction 项目地址: https://gitcode.com/gh_mirrors/ne/nexus

前言

GraphQL-Nexus是一个强大的TypeScript优先的GraphQL框架，它允许开发者以编程方式构建类型安全的GraphQL API。本文将详细介绍如何在Next.js项目中集成GraphQL-Nexus，创建一个完整的全栈应用。

环境准备

首先，我们需要创建一个基本的Next.js项目并配置TypeScript支持：

npm init next-app
npm i -D typescript @types/react @types/node

运行开发服务器以生成默认的TypeScript配置：

npm run dev

核心依赖安装

接下来安装GraphQL-Nexus及其相关依赖：

npm i nexus apollo-server-micro

这里我们选择apollo-server-micro作为GraphQL服务器，因为它特别适合在无服务器环境中运行。

创建GraphQL API路由

Next.js的API路由遵循基于文件夹的约定。在pages/api目录下创建graphql.ts文件：

touch pages/api/graphql.ts

初始配置如下：

import { makeSchema, queryType } from 'nexus'
import { ApolloServer } from 'apollo-server-micro'

const Query = queryType({
  definition(t) {
    t.string('hello', { resolve: () => 'hello world!' })
  },
})

const schema = makeSchema({
  types: [Query],
})

const server = new ApolloServer({
  schema,
})

export const config = {
  api: {
    bodyParser: false,
  },
}

export default server.createHandler({
  path: '/api/graphql',
})

构建模块化Schema

为了更好的代码组织，我们将在项目根目录创建schema文件夹来管理GraphQL类型定义：

mkdir schema
touch schema/Query.ts
touch schema/index.ts

在Query.ts中定义我们的业务类型和查询：

import { objectType, queryType } from 'nexus'

export const Framework = objectType({
  name: 'Framework',
  definition(t) {
    t.id('id')
    t.string('name')
  },
})

export const Query = queryType({
  definition(t) {
    t.list.field('frameworks', {
      type: 'Framework',
      resolve: () => {
        return [
          { id: '1', name: 'React' },
          { id: '2', name: 'Vue' },
          { id: '3', name: 'Angular' },
          { id: '4', name: 'Svelte' },
        ]
      },
    })
  },
})

在index.ts中整合所有类型：

import { makeSchema } from 'nexus'
import * as QueryTypes from './Query'

const schema = makeSchema({
  types: [QueryTypes],
})

export default schema

前端数据获取

在Next.js中，我们有多种方式获取GraphQL数据：

服务器端渲染(SSR)

安装graphql-request库：

npm i graphql-request

在页面组件中使用getServerSideProps：

import { request, gql } from 'graphql-request'

export async function getServerSideProps() {
  const query = gql`
    {
      frameworks {
        id
        name
      }
    }
  `
  const data = await request('http://localhost:3000/api/graphql', query)
  return { props: { frameworks: data.frameworks } }
}

export default function Home({ frameworks }) {
  return (
    <div>
      <ul>
        {frameworks.map(f => (
          <li key={f.id}>{f.name}</li>
        ))}
      </ul>
    </div>
  )
}

静态生成(SSG)

类似地，可以使用getStaticProps进行静态生成。

客户端渲染(CSR)

对于需要客户端GraphQL功能（如缓存）的场景，可以考虑使用Apollo Client。

类型生成配置

在Next.js项目中配置Nexus的类型生成需要特殊处理：

import path from 'path'

const schema = makeSchema({
  types: [QueryTypes],
  outputs: {
    typegen: path.join(process.cwd(), 'generated/nexus-typegen.ts'),
    schema: path.join(process.cwd(), 'generated/schema.graphql'),
  },
})

更新package.json构建脚本：

{
  "scripts": {
    "dev": "next dev",
    "build:nexus-typegen": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' --transpile-only schema",
    "build": "npm run build:nexus-typegen && next build",
    "start": "next start"
  }
}