使用Nhost与SvelteKit快速构建全栈应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00116/article/details/148440143

使用Nhost与SvelteKit快速构建全栈应用

nhost nhost/nhost: 是一个用于构建基于 Nuxt.js 的后端应用程序的框架，可以方便地实现 Nuxt.js 后端应用程序的开发。适合对 Nuxt.js、后端应用程序和想要实现 Nuxt.js 后端应用程序的开发者。项目地址: https://gitcode.com/gh_mirrors/nh/nhost

Nhost是一个基于PostgreSQL数据库和Hasura GraphQL引擎的后端即服务(BaaS)平台，能够帮助开发者快速构建现代应用程序。本文将详细介绍如何将Nhost与SvelteKit前端框架结合使用，创建一个完整的全栈应用。

项目初始化与数据库配置

首先需要在Nhost控制面板中创建一个新项目。创建完成后，进入数据库的SQL编辑器执行以下SQL语句来创建电影数据表：

CREATE TABLE movies (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  director VARCHAR(255),
  release_year INTEGER,
  genre VARCHAR(100),
  rating FLOAT
);

INSERT INTO movies (title, director, release_year, genre, rating) VALUES
  ('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
  ('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
  ('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
  ('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);

重要提示：执行SQL时请确保勾选"Track this"选项，这样Hasura才能自动为表生成GraphQL API。

设置数据访问权限

在Nhost中，数据访问权限需要显式配置。对于我们的电影表，需要为public角色设置select权限：

在数据库管理界面找到movies表
点击"Edit Permissions"
为public角色启用select权限

这样设置后，前端应用才能通过GraphQL查询电影数据。

创建SvelteKit前端应用

使用以下命令创建一个最小化的SvelteKit项目：

mkdir nhost-sveltekit-quickstart && \
cd nhost-sveltekit-quickstart && \
npx sv create --template minimal --no-types --no-add-ons --install npm

这个命令会创建一个不包含额外配置和类型检查的基本SvelteKit项目。

集成Nhost客户端

安装Nhost的JavaScript客户端库：

npm install @nhost/nhost-js

然后在项目中创建Nhost客户端实例。新建src/lib/nhost.js文件：

import { NhostClient } from "@nhost/nhost-js";

export const nhost = new NhostClient({
  subdomain: "<subdomain>",
  region: "<region>",
})

注意：需要将<subdomain>和<region>替换为你Nhost项目的实际值。

实现数据查询与展示

在SvelteKit的主页面组件中，我们可以使用Nhost客户端查询电影数据。修改src/routes/+page.svelte文件：

<script>
  import { onMount } from 'svelte';
  import { nhost } from '../lib/nhost';

  let loading = true;
  let movies = [];

  const getMovies = `
    query {
      movies {
        title
        genre
        rating
      }
    }
  `;

  onMount(async () => {
    const { data, error } = await nhost.graphql.request(getMovies);
    if (!error) {
      movies = data.movies;
    }
    loading = false;
  });
</script>

{#if loading}
  <p>Loading...</p>
{:else}
  <table>
    <tbody>
      {#each movies as movie}
        <tr>
          <td>{movie.title}</td>
          <td>{movie.genre}</td>
          <td>{movie.rating}</td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}

这段代码实现了：