Bắt đầu sử dụng Firebase SQL Connect bằng React

Trong hướng dẫn nhanh này, bạn sẽ tạo và triển khai một cơ sở dữ liệu mẫu nhỏ, đồng thời truy cập vào cơ sở dữ liệu đó từ một giao diện người dùng React.

Điều kiện tiên quyết

Để hoàn tất hướng dẫn nhanh này, bạn cần có những điều sau:

• Môi trường Node.js có NPM.
• Tài khoản Google.

Hướng dẫn

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

Các bước tiếp theo

Dùng thử tiện ích SQL Connect VS Code

Khi phát triển bằng SQL Connect, bạn nên sử dụng tiện ích SQL Connect VS Code. Ngay cả khi bạn không sử dụng Visual Studio Code làm môi trường phát triển chính, tiện ích này vẫn cung cấp một số tính năng giúp phát triển giản đồ và thao tác thuận tiện hơn:

• Máy chủ ngôn ngữ GraphQL, cung cấp tính năng kiểm tra cú pháp và các cụm từ gợi ý tự động hoàn thành dành riêng cho SQL Connect
• Các nút CodeLens cùng dòng với mã của bạn, cho phép bạn đọc và ghi dữ liệu từ các tệp định nghĩa giản đồ và thực thi các truy vấn và đột biến từ các định nghĩa thao tác.
• Tự động đồng bộ hoá các SDK đã tạo với các định nghĩa GraphQL.
• Thiết lập trình mô phỏng cục bộ đơn giản.
• Triển khai đơn giản vào thực tế.

Sử dụng trình mô phỏng SQL Connect để phát triển cục bộ

Mặc dù hướng dẫn này đã chỉ cho bạn cách triển khai trực tiếp các SQL Connect giản đồ và thao tác vào thực tế, nhưng có thể bạn sẽ không muốn thay đổi cơ sở dữ liệu thực tế khi đang tích cực phát triển ứng dụng. Thay vào đó, hãy thiết lập trình mô phỏng SQL Connect và thực hiện công việc phát triển trên trình mô phỏng này thay vì thực tế. Trình mô phỏng thiết lập một thực thể PGlite cục bộ hoạt động tương tự như một thực thể PostgreSQL trực tiếp trên Cloud SQL.

Tìm hiểu cách viết giản đồ và thao tác cho ứng dụng

Khi phát triển ứng dụng bằng SQL Connect, việc thiết kế giản đồ và thao tác là một trong những nhiệm vụ phát triển đầu tiên và quan trọng nhất mà bạn sẽ hoàn thành.

• Gemini trong Firebase bảng điều khiển là một công cụ AI có thể tạo giản đồ SQL Connect từ nội dung mô tả ứng dụng bằng ngôn ngữ tự nhiên. Công cụ này có thể giúp bạn bắt đầu rất nhanh, đặc biệt nếu bạn chưa từng làm việc với cơ sở dữ liệu quan hệ.
• Ngoài ra, bạn có thể viết trực tiếp các giản đồ, truy vấn và đột biến cơ sở dữ liệu bằng GraphQL. Bắt đầu bằng hướng dẫn trong phần Thiết kế giản đồSQL Connect, sau đó tiếp tục xem các trang tiếp theo để tìm hiểu cách viết thao tác.