React kullanarak Firebase Data Connect'i kullanmaya başlama

Bu hızlı başlangıç kılavuzunda küçük bir örnek veritabanı oluşturup dağıtacak ve bu veritabanına bir React ön ucundan erişeceksiniz.

Ön koşullar

Bu hızlı başlangıç kılavuzunu tamamlamak için aşağıdakilere ihtiyacınız vardır:

• NPM'li bir Node.js ortamı.
• Google Hesabı

Eğitim

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

Sonraki adımlar

Data Connect VS Code uzantısını deneyin

Data Connect ile geliştirme yaparken Data Connect VS Code uzantısını kullanmanızı önemle tavsiye ederiz. Visual Studio Code'u birincil geliştirme ortamınız olarak kullanmasanız bile uzantı, şema ve işlem geliştirmeyi daha kolay hale getiren çeşitli özellikler sunar:

• Data Connect'ya özel söz dizimi denetimi ve otomatik tamamlama önerileri sağlayan bir GraphQL dil sunucusu
• Şema tanımı dosyalarınızdan veri okumanıza ve yazmanıza, ayrıca işlem tanımlarınızdan sorgu ve mutasyon yürütmenize olanak tanıyan, kodunuzla aynı satırda bulunan CodeLens düğmeleri.
• Oluşturulan SDK'larınızı GraphQL tanımlarınızla otomatik olarak senkronize tutun.
• Basitleştirilmiş yerel emülatör kurulumu.
• Üretim ortamına basitleştirilmiş dağıtım.

Yerel geliştirme için Data Connect emülatörünü kullanma

Bu eğitimde Data Connect şemalarının ve işlemlerinin doğrudan üretime nasıl dağıtılacağı gösterilse de uygulamanızı aktif olarak geliştirirken üretim veritabanınızda değişiklik yapmak istemeyebilirsiniz. Bunun yerine, Data Connect emülatörünü ayarlayın ve geliştirme çalışmalarınızı üretim yerine bu emülatörde yapın. Emülatör, Cloud SQL'deki canlı bir PostgreSQL örneğine benzer şekilde davranan yerel bir PGLite örneği oluşturur.

Uygulamanız için şemaları ve işlemleri nasıl yazacağınızı öğrenin

Data Connect ile uygulama geliştirirken şemalarınızın ve işlemlerinizin tasarımı, tamamlayacağınız ilk ve en önemli geliştirme görevlerinden biridir.

• Firebase konsolunda Gemini, uygulamanızın doğal dil açıklamasına dayalı olarak Data Connect şemaları oluşturabilen bir yapay zeka aracıdır. Bu araç, özellikle daha önce ilişkisel veritabanlarıyla çalışmadıysanız çok hızlı bir şekilde başlamanıza yardımcı olabilir.
• Alternatif olarak, GraphQL kullanarak doğrudan veritabanı şemaları, sorgular ve mutasyonlar yazabilirsiniz. Tasarım Data Connect şemaları sayfasından başlayın ve yazma işlemlerini nasıl yapacağınızı öğrenmek için sonraki sayfalara geçin.