在10分钟内搭建【Next.js/Hasura】GraphQL环境

2 年 ago
宇, 华
2 minutes

首先

最近GraphQL在中国变得非常受欢迎。
之前在实习时有机会使用Hasura，以极快的速度建立了GraphQL环境。
虽然最后项目采用了Nest.js而没有使用Hasura，但总的来说，对于个人开发来说，很少有比这更方便的选择了。

环境建立

获取 Hasura

立即从Hasura官方网站下载docker-compose.yml文件。下面的命令是使用wget示例，也支持curl。

wget https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml

从下载的文件中取消注释HASURA_GRAPHQL_ADMIN_SECRET，并将其替换为任意值。此值将成为前端与后端进行通信时的SecretToken。

- ## HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
+ HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey

创建Next.js应用

将下面的服务添加到先前下载的文件中，以供next.js使用。将以下服务添加到services项目中。将node版本和端口更改为任意值。在示例中，node版本为18，端口为3000。

web:
    image: node:18
    restart: always
    volumes:
      - .:/opt/web
    working_dir: /opt/web
    ports:
      - "3000:3000"
    tty: true

当您能够添加服务时，请使用以下命令启动容器集合。

docker-compose up
# docker-compose up -d   //バックグラウンドでの実行

一旦容器启动，进入web容器并创建next.js应用程序。默认设置在创建应用程序时没有问题。建议根据所使用的服务进行适时更改。

docker-compose exec web bash
npx create-next-app@latest

当您完成了Next.js应用的创建后，可以在容器中移动项目文件。这样做是为了将docker-compose.yml文件所在的目录与项目目录置于同一级别。如果不迁移项目目录，则需要修改docker-compose.yml文件中web服务的volumes。

mv $app_name .
rm -r $app_name

由于当前创建的文件都是以root权限创建的，所以需要更改项目目录及其以下文件的权限。前往项目目录所在的层级，并使用下面的命令进行权限更改。如果不更改权限，在每次文件更改时都会被要求输入密码，十分麻烦。

sudo chmod 755 -R app_name
sudo chown $USER:$USER -R app_name

最后，我们将在docker-compose.yml文件中设置命令，以便在启动容器时运行next.js服务器，并进行相应的修改。我们将修改之前添加的web服务的某些部分。

- tty: true
+ command: npm run start

使用Next.js与Hasura进行连接。

使用Appolo Client在Next.js中连接到Hasura。在web容器中使用以下命令安装graphql和apollo client。

npm i @apollo/client graphql

安装完成后，将与Hasura连接所需的信息整理到.env文件中。将NEXT_PUBLIC_HASURA_ADMIN_SECRET的值填入docker-compose.yml文件中指定的值。

NEXT_PUBLIC_GRAPHQL_ENDPOINT = http://localhost:8080/v1/graphql
NEXT_PUBLIC_HASURA_ADMIN_SECRET = myadminsecretkey

为了连接到Hasura，需要在Apollo Client的provider中进行设置。在headers中设置x-hasura-admin-secret。

import "@/styles/globals.css";
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  createHttpLink,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import type { AppProps } from "next/app";

const httpLink = createHttpLink({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      "x-hasura-admin-secret": process.env.NEXT_PUBLIC_HASURA_ADMIN_SECRET,
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

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

小礼物

ChakraUI的配置设置

在 web 容器中安装 ChakraUI。

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

为了使用ChakraUI，需要在_app.tsx文件中进行Provider的配置。

+ import { ChakraProvider } from "@chakra-ui/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
+     <ChakraProvider>
        <ApolloProvider client={client}>
          <Component {...pageProps} />
        </ApolloProvider>
+     </ChakraProvider>
  );
}

最后

在上述步骤中，GraphQL环境已经建立完成。实际上，当访问http://localhost:3000时，可以访问到next.js；当访问http://localhost:8080时，可以访问到Hasura。
祝您有一个美好的工程师生活。

bannerAds