UpstashRedisとNext.jsを使用して調査アプリを構築する

新しいファイルを作成するpages/api/submit.js 以下のように：

// pages/api/submit.js

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: "INSERT_YOUR_URL_HERE",
  token: "INSERT_YOUR_TOKEN_HERE",
});

const submitHandler = async (req, res) => {
  const body = req.body;

  // Prepare data to be inserted into the DB
  const data = {
    rating: String(body.rating) || "0",
    recommendation: String(body.recommendation) || "false",
    comment: String(body.comment) || "",
  };

  // Generate a random id to store the survey entry under
  const id =
    Math.random().toString(36).substring(2, 15) +
    Math.random().toString(36).substring(2, 15);

  // Insert data into Upstash redis

  try {
    //Store the survey data
    await redis.hset(`entries:${id}`, data);

    //Store the id of the survey to retrieve it later
    await redis.sadd("entries", `entries:${id}`);
  } catch (error) {
    console.error("Failed to insert data into redis", error);

    return res.status(500).json({
      success: false,
      message: "Failed to insert data into redis",
    });
  }

  return res.status(200).json({
    success: true,
    message: "Data inserted successfully",
  });
};

export default submitHandler;

ここでは3つのことを行います：

1. リクエスト本文から調査データを取得し、Redis用に準備します
2. 調査エントリをハッシュとしてRedisに挿入します
3. 調査エントリのIDをセットに追加します

なぜ調査エントリのハッシュを作成し、さらにそのIDをセットに入れるのか疑問に思われるかもしれません。このステップは、Redisからイベントを再度取得するときに重要になります。 Redisはキー値ストアとして機能します。つまり、SQLデータベースで慣れているものとは異なり、データを保存する正確なキーを指定しない限り、Redisはデータを検索しません。 SELECT * FROM SurveyResults;のようなクエリ SQLでサポートされますが、Redisでは別のトリックを使用する必要があります。このために、セットを作成し、調査結果エントリのすべてのRedisキーを追加します。すべての調査エントリを取得したい場合は、セット内のキーを検索するだけですが、コーディングに戻って、実際にどのように表示されるかを見てみましょう。

新しいファイルを作成するpages/api/results.js 以下のように：

// pages/api/results.js

import { Redis } from "@upstash/redis";

const resultsHandler = async (req, res) => {
  // Retrieve data from redis

  const redis = new Redis({
    url: "INSERT_YOUR_URL_HERE",
    token: "INSERT_YOUR_TOKEN_HERE",
  });

  try {
    //Find all the entries in the set
    const entries = await redis.smembers("entries");

    //Get all survey entries by id/key

    //To run multiple queries at once, Upstash supports the use of the pipeline command. This way we can run multiple queries at once and get the results in a single call.
    const p = redis.pipeline();
    entries.forEach((id) => {
      p.hgetall(id);
    });
    const results = await p.exec();

    return res.status(200).json({
      success: true,
      message: "Data retrieved successfully",
      data: results,
    });
  } catch (error) {
    console.error("Failed to retrieve data from redis", error);

    return res.status(500).json({
      success: false,
      message: "Failed to retrieve data from redis",
    });
  }
};

export default resultsHandler;

バックエンドは現在機能しており、フロントエンドでアプリを完成させることができます。

新しいファイルを作成するpages/index.js 以下のように：

// pages/index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  const handleSubmit = async (e) => {
    e.preventDefault();

    const form = e.target;

    const data = {
      rating: form.rating.value,
      recommendation: form.recommendation.value,
      comment: form.comment.value,
    };

    // send data to backend
    await fetch("/api/submit", {
      body: JSON.stringify(data),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
    });

    alert("Thank you for your feedback!");
  };

  const RatingOption = ({ value }) => (
    <div>
      <input type="radio" name="rating" value={value} required />{" "}
      <label>{value}</label>
    </div>
  );

  return (
    <div className={styles.container} onSubmit={handleSubmit}>
      <form>
        <div>
          <label>How do you feel about our products/services?</label>

          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
            <RatingOption key={value} value={value} />
          ))}
        </div>

        <div>
          <label>Would you recommend us to your colleagues?</label>

          <div>
            <input type="radio" name="recommendation" value="true" required />{" "}
            <label>Yes</label>
          </div>

          <div>
            <input type="radio" name="recommendation" value="false" required />{" "}
            <label>No</label>
          </div>
        </div>

        <div>
          <label>Please share your thoughts... (Optional)</label>
          <textarea
            name="comment"
            placeholder="This is what I liked most/this is what you can improve..."
          ></textarea>
        </div>

        <input type="submit" />
      </form>
    </div>
  );
}

次に、スタイルを機能させるために、styles/Home.styles.cssのコンテンツを置き換えます。 次のように：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
}

.container form > div {
  padding: 20px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.container form > div > label {
  margin-bottom: 10px;
}

これで、調査エントリを受け取る準備が整いました。しかし、待ってください、もっとあります。調査結果をフロントエンドに実装する必要があります。

新しいファイルを作成するpages/results.js 以下のように：

import { useEffect, useState } from "react";

import styles from "../styles/Results.module.css";

export default function Results() {
  const [surveyData, setSurveyData] = useState([]);

  useEffect(() => {
    fetch("/api/results")
      .then((res) => res.json())
      .then((response) => setSurveyData(response.data));
  }, []);

  return (
    <div className={styles.container}>
      {" "}
      {surveyData.map((data) => (
        <div key={data.id}>
          <p>
            <strong> Rating: </strong> {data.rating}{" "}
          </p>{" "}
          <p>
            <strong> Recommendation: </strong> {data.recommendation}{" "}
          </p>{" "}
          <p>
            <strong> Comment: </strong> {data.comment}{" "}
          </p>{" "}
        </div>
      ))}{" "}
    </div>
  );
}

最後に、ファイルstyles/Results.module.cssを作成します 次の内容で：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  min-height: 100vh;
  margin: 50px 0;
}

.container > div {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;

  padding: 15px;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 10px;
}

.container p {
  margin: 0;
}

すべての調査エントリの概要は、localhost:3000/resultsにあります。 。

アプリケーションの完全なソースコードは、GitHubリポジトリupstash-survey-appで入手できます。