เริ่มต้นใช้งาน Firebase SQL Connect โดยใช้ React

ในการเริ่มต้นอย่างรวดเร็วนี้ คุณจะได้สร้างและติดตั้งใช้งานฐานข้อมูลตัวอย่างขนาดเล็ก รวมถึงเข้าถึงฐานข้อมูลดังกล่าวจากส่วนหน้าของ React

ข้อกำหนดเบื้องต้น

หากต้องการทำตามการเริ่มต้นอย่างรวดเร็วนี้ คุณจะต้องมีสิ่งต่อไปนี้

• สภาพแวดล้อม Node.js ที่มี NPM
• บัญชี Google

บทแนะนำ

mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

npx -y firebase-tools@latest deploy --only dataconnect

npx -y firebase-tools@latest \
         dataconnect:execute dataconnect/seed_data.gql

npx -y firebase-tools@latest dataconnect:sdk:generate

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

npx -y firebase-tools@latest \
          apps:create web react-example
npx -y firebase-tools@latest \
          apps:sdkconfig web \
          -o web-app/src/firebase-config.json
cd web-app
npm i firebase \
            @tanstack/react-query \
            @tanstack-query-firebase/react

import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

npm run dev

ขั้นตอนถัดไป

ลองใช้ส่วนขยาย SQL Connect VS Code

เมื่อพัฒนาด้วย SQL Connect เราขอแนะนำอย่างยิ่งให้ใช้ ส่วนขยาย SQL Connect VS Code แม้ว่าคุณจะไม่ได้ใช้ Visual Studio Code เป็นสภาพแวดล้อมการพัฒนาหลัก แต่ส่วนขยายนี้มีฟีเจอร์หลายอย่างที่ช่วยให้การพัฒนาสคีมาและการดำเนินการ สะดวกยิ่งขึ้น

• เซิร์ฟเวอร์ภาษา GraphQL ที่ให้การตรวจสอบไวยากรณ์และคำแนะนำในการเติมข้อความอัตโนมัติที่เฉพาะเจาะจง สำหรับ SQL Connect
• ปุ่ม CodeLens ที่สอดคล้องกับโค้ดของคุณ ซึ่งช่วยให้คุณอ่านและเขียนข้อมูลจากไฟล์คำจำกัดความสคีมา รวมถึงเรียกใช้การค้นหาและการเปลี่ยนแปลงจากคำจำกัดความฟังก์ชัน
• ซิงค์ SDK ที่สร้างขึ้นกับคำจำกัดความ GraphQL โดยอัตโนมัติ
• การตั้งค่าโปรแกรมจำลองในเครื่องแบบง่าย
• การติดตั้งใช้งานในเวอร์ชันที่ใช้งานจริงแบบง่าย

ใช้โปรแกรมจำลอง SQL Connect สำหรับ การพัฒนาในเครื่อง

แม้ว่าบทแนะนำนี้จะแสดงวิธีติดตั้งใช้งานSQL Connect สคีมาและฟังก์ชันในเวอร์ชันที่ใช้งานจริงโดยตรง แต่คุณอาจไม่ต้องการ ทำการเปลี่ยนแปลงฐานข้อมูลในเวอร์ชันที่ใช้งานจริงขณะที่กำลังพัฒนา แอปอยู่ ให้ตั้งค่า SQL Connectโปรแกรมจำลอง และทำงานพัฒนาในโปรแกรมจำลองแทนที่จะใช้เวอร์ชันที่ใช้งานจริง โปรแกรมจำลอง จะตั้งค่าอินสแตนซ์ PGlite ในเครื่องที่มีลักษณะการทำงานคล้ายกับอินสแตนซ์ PostgreSQL ที่ใช้งานจริงใน Cloud SQL

ดูวิธีเขียนสคีมาและ ฟังก์ชันสำหรับแอป

เมื่อพัฒนาแอปด้วย SQL Connect การออกแบบสคีมาและฟังก์ชัน เป็นหนึ่งในงานพัฒนาแรกๆ และสำคัญที่สุดที่คุณจะต้องทำ

• Gemini ในFirebase คอนโซล เป็นเครื่องมือ AI ที่สามารถสร้างSQL Connect สคีมา จากคำอธิบายแอปของคุณในภาษาธรรมชาติ เครื่องมือนี้ช่วยให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็ว โดยเฉพาะอย่างยิ่งหากคุณไม่เคยใช้ฐานข้อมูลเชิงสัมพันธ์มาก่อน
• หรือคุณจะเขียนสคีมา ฐานข้อมูล การค้นหา และการเปลี่ยนแปลง โดยตรงโดยใช้ GraphQL ก็ได้ เริ่มต้นด้วยคำแนะนำใน หัวข้อการออกแบบสคีมาSQL Connect, จากนั้นไปที่หน้าติดตามเพื่อดูวิธีเขียนฟังก์ชัน

ดูวิธีรับข้อมูลอัปเดตแบบเรียลไทม์จาก SQL Connect

คุณสามารถใช้ SQL Connect เพื่อเขียนแอปพลิเคชันไคลเอ็นต์ที่ตอบสนองต่อข้อมูลที่เปลี่ยนแปลงแบบเรียลไทม์ใน ดูหัวข้อรับข้อมูลอัปเดตแบบเรียลไทม์จาก SQL Connect