Logo

菜单

发布于 2026-01-06 0 阅读
0

Next.js + GraphQL + TypeScript 设置

Next.js + GraphQL + TypeScript 设置

本文将引导您完成 Next.js 应用的简单 GraphQL 设置。

本指南面向已经熟悉 GraphQL 的用户，如果您还不了解，我建议您先阅读一些教程，了解一下 GraphQL 的基本概念。剧透一下，GraphQL 非常棒。

应用程序设置

有两种方法可以实现这一点，在这种情况下，我们将使用create-next-app命令。

在终端中运行以下命令。

npx create-next-app --ts next-graphql-app
Enter fullscreen mode Exit fullscreen mode

移动到应用程序文件夹

cd next-graphql-app
Enter fullscreen mode Exit fullscreen mode

添加 TypeScript

我是个 TypeScript 狂热爱好者，现在我几乎写不出普通的 JavaScript 代码了。所以请多多包涵，把 TypeScript 添加到你的应用中吧。不开玩笑，TypeScript 真的很棒，你应该试试。Next.js 也让 TypeScript 的使用变得非常简单。

以前需要一些步骤才能安装 TypeScript 并让它在你的应用中运行，但现在你可以使用--t标志位，而且很快create-next-appTypeScript 就会默认启用，所以我们可以跳过这部分了。🥳

最后，启动应用程序

npm run dev
Enter fullscreen mode Exit fullscreen mode

它活了！

添加 Apollo GraphQL

我们已经完成了 NextJS + TypeScript 部分，现在开始 GraphQL。在本指南中，我们将使用名为Apollo Client 的
库来处理数据获取（URQL指南即将推出）。

首先，我们来安装 Apollo Client 和 GraphQL。

npm install @apollo/client graphql
Enter fullscreen mode Exit fullscreen mode

在设置客户端之前，我们需要一个 API 来连接。我们可以自己构建 GraphQL 后端，但这将在另一篇博客中讨论。现在，我们将使用一个现有的国家/地区 API，顺便给它点个赞吧。

有了API URL，我们就可以创建要连接的客户端了。在客户端中pages/_app.tsx添加以下代码。

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache()
});
Enter fullscreen mode Exit fullscreen mode

现在让我们使用 . 将客户端连接到我们的应用程序ApolloProvider。

你的pages/_app.tsx看起来应该像这样。

import type { AppProps } from 'next/app';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com',
  cache: new InMemoryCache(),
});

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

所以，在这里，我们基本上是将我们的应用程序包装在一个ApolloProvider以客户端作为 prop 的组件中。

获取数据

我们的应用现在已经连接到国家/地区的 API，但目前还没有什么进展。正如您可能已经发现的，我们需要实际获取数据。Apollo 提供了一些钩子函数来帮助我们获取数据，在本教程中，我们将只使用其中一个useQuery钩子函数，但您可以随意探索 Apollo 提供的所有其他钩子函数。

让我们清理掉pages/index.tsxNextJS 自带的默认内容。

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      <div>
        <h3>Countries go here</h3>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

我们还要从中移除那些我们不会使用的样式styles/Home.module.css。

/* This is all we need */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

好多了 :)

我们将使用 GraphQL 查询来获取数据，它看起来像这样。

query {
    countries {
      code
      name
  }
}
Enter fullscreen mode Exit fullscreen mode

当然，我们可以把查询语句写在同一个文件中，但我更喜欢把查询语句放在单独的文件中。为了实现这一点，我们需要做一些调整，让 NextJS 知道如何读取这些.graphql文件。

在根文件夹内创建一个名为 `<filename>` 的文件next.config.js，并输入以下代码。

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    return config;
  },
};
Enter fullscreen mode Exit fullscreen mode

这是告诉webpack如何加载.graphql文件。

现在我们需要告诉 TypeScript 关于这个.graphql文件的信息，否则它会报错。在根文件夹下创建一个名为 `<path>` 的文件夹@types，在该文件夹下创建一个名为 `<filename>` 的文件graphql.d.ts，并添加以下代码。

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}
Enter fullscreen mode Exit fullscreen mode

好了，应该就是这样了。现在我们创建一个.graphql文件，用来存放我们的查询语句。

为了简单起见，我们将查询文件放在该pages文件夹内，但您可以根据自己的习惯进行操作。所以，就像我之前说的，在该pages文件夹内创建一个名为 `query.py` 的文件，queryCountries.graphql并添加以下代码。

query {
 countries {
   code
   name
 }
}
Enter fullscreen mode Exit fullscreen mode

pages/index.tsx现在让我们使用钩子调用内部查询useQuery。

import Head from 'next/head';
import { useQuery } from '@apollo/client';

import QUERY_COUNTRIES from './queryCountries.graphql';

import styles from '../styles/Home.module.css';

export default function Home() {
  const { data, loading, error } = useQuery(QUERY_COUNTRIES);

  // check for errors
  if (error) {
    return <p>:( an error happened</p>;
  }

  // if all good return data
  return (
    <div className={styles.container}>
      <Head>
        <title>Countries GraphQL</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Countries</h1>
      {/* let the user know we are fetching the countries */}
      {loading && <p>loading...</p>}
      <div>
        {data.countries.map((country) => (
          <div key={country.code}>{country.name}</div>
        ))}
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

你应该会看到类似这样的内容：

2020-08-17 00-50-06 的屏幕截图.png

虽然不太美观，但数据已经到位，我们的设置也完成了。

您可以在这里查看源代码。

挑战

现在我们已经有了数据，我邀请你来设计这款应用，并在推特上@ivanms1把结果发给我。记住，你可以向查询中添加更多字段，例如国旗、首都和货币。

query {
 countries {
   code
   name
   capital
   emoji
   currency
  }
}
Enter fullscreen mode Exit fullscreen mode

查看操场地图，了解所有可用的场地。

希望你喜欢这篇教程，如果喜欢的话，请点赞、评论和分享，这样我才能继续制作更多教程。

请点击此处查看本文第二部分。

文章来源：https://dev.to/ivanms1/next-js-graphql-typescript-setup-5bog
乐观的用户界面
.NET 7 全新官方功能发布（速...