Oluşturulan web SDK'larını kullanın

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Firebase Data Connect istemci SDK'ları, sunucu tarafı sorgularınızı ve mutasyonlarınızı doğrudan bir Firebase uygulamasından çağırmanıza olanak tanır. Data Connect hizmetinize dağıttığınız şemaları, sorguları ve mutasyonları tasarlarken paralel olarak özel bir istemci SDK'sı oluşturursunuz. Ardından, bu SDK'daki yöntemleri istemci mantığınıza entegre edersiniz.

Başka bir yerde de belirttiğimiz gibi, Data Connectsorguların ve mutasyonların istemci kodu tarafından gönderilmediğini ve sunucuda yürütülmediğini belirtmek isteriz. Bunun yerine, dağıtılan Data Connect işlemleri Cloud Functions gibi sunucuda depolanır. Bu nedenle, mevcut kullanıcıların (ör. eski uygulama sürümlerinde) uygulamayı kullanamamasını önlemek için istemci tarafında ilgili değişiklikleri dağıtmanız gerekir.

Bu nedenle Data Connect, sunucu üzerinde dağıtılan şemalarınızı, sorgularınızı ve mutasyonlarınızı prototip haline getirmenizi sağlayan bir geliştirici ortamı ve araçları sunar. Ayrıca, siz prototip oluştururken istemci tarafı SDK'ları otomatik olarak oluşturur.

Hizmetinizde ve istemci uygulamalarınızda güncellemeleri iteratif olarak uyguladığınızda hem sunucu hem de istemci tarafı güncellemeleri dağıtılmaya hazır olur.

Müşteri geliştirme iş akışı nedir?

Başlayın bölümünü izlediyseniz Data Connect için genel geliştirme akışıyla tanıştırıldınız. Bu kılavuzda, şemanızdan web SDK'ları oluşturma ve istemci sorguları ve mutasyonlarla çalışma hakkında daha ayrıntılı bilgi bulabilirsiniz.

Özetlemek gerekirse, oluşturulan Web SDK'larını istemci uygulamalarınızda kullanmak için aşağıdaki ön koşul adımlarını uygularsınız:

1. Firebase'i web uygulamanıza ekleyin.

Ardından:

1. Uygulama şemanızı geliştirin.
2. İstemci kodunuzu JavaScript SDK'sı veya React ya da Angular kitaplıklarıyla başlatın.
3. React ve Angular için Tanstack sorgu paketlerini yükleyin.

4. SDK oluşturma işlemini ayarlayın:

   • Data Connect VS Code uzantımızdaki SDK'yı uygulamaya ekle düğmesiyle
   • connector.yaml'nizi JavaScript SDK, React veya Angular için güncelleyerek

5. Kitaplıkları ve oluşturulan kodu JavaScript SDK'sı, React veya Angular ile içe aktarın.

6. Sorgulara ve mutasyonlara yönelik çağrıları JavaScript SDK'sı, React veya Angular ile uygulayın.

7. Data Connect emülatörünü JavaScript SDK, React veya Angular ile ayarlayarak test edin.

Firebase JavaScript SDK'sı ile istemci kodunu uygulama

Bu bölümde, Firebase JavaScript SDK'sını kullanarak istemcileri nasıl uygulayabileceğiniz açıklanmaktadır.

React veya Angular kullanıyorsanız çerçeveler için Data Connect SDK'ları oluşturma hakkındaki alternatif kurulum talimatlarını ve ek dokümanların bağlantılarını inceleyin.

Uygulamanızı ilk kullanıma hazırlayın

Öncelikle, standart Firebase sırasını kullanarak uygulamanızı başlatın.

initializeApp({...});

JavaScript SDK'nızı oluşturma

Çoğu Firebase projesinde olduğu gibi, Firebase Data Connect istemci kodunuz üzerinde yerel bir proje dizininde çalışırsınız. Hem Data Connect VS Code uzantısı hem de Firebase CLI, istemci kodu oluşturmak ve yönetmek için önemli yerel araçlardır.

SDK oluşturma seçenekleri, projenizi ilk kez başlattığınızda oluşturulan dataconnect.yaml dosyasında çeşitli girişlere göre ayarlanır.

SDK oluşturma işlemini başlatma

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir, oluşturulan SDK'nın nereye yayınlanacağını belirtir.

package, paket adını belirtir.

packageJsonDir, paketin nereye yükleneceğini belirtir.

Bu durumda, bu eş bağımlığın karşılandığından emin olmak için firebase@latest'ü yükleyin.

JavaScript SDK'sını başlatma

Data Connect'i ayarlamak için kullandığınız bilgileri kullanarak Data Connect örneğinizi başlatın (tüm bilgiler Firebase konsolunun Data Connect sekmesinde bulunur).

ConnectorConfig nesnesi

SDK için bir bağlayıcı yapılandırma nesnesi gerekir.

Bu nesne, dataconnect.yaml'deki serviceId ve location ile connector.yaml'deki connectorId'ten otomatik olarak oluşturulur.

Kitaplıkları içe aktarma

İstemci kodunuzu ilk kullanıma hazırlamak için gereken iki içe aktarma grubu vardır: genel Data Connect içe aktarma işlemleri ve özel, oluşturulmuş SDK içe aktarma işlemleri.

Genel içe aktarma işlemlerine dahil edilen ConnectorConfig nesnesine dikkat edin.

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';

JavaScript SDK'sındaki sorguları kullanma

Oluşturulan kod, önceden tanımlanmış sorgu referanslarıyla birlikte gelir. Tek yapmanız gereken bunları içe aktarıp çalıştırmaktır.

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

SDK sorgu yöntemlerini çağırma

Aşağıda bu işlem kısayol işlevlerini kullanan bir örnek verilmiştir:

import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out
// to the server.
  listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

Değişikliklere abone olma

Değişikliklere abone olabilirsiniz (bu abonelik, bir sorgu yürüttüğünüz her zaman güncellenir).

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

JavaScript SDK'sından mutasyonları kullanma

Mutasyonlara sorgularla aynı şekilde erişilebilir.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

Data Connect emülatörüne bağlanma

İsteğe bağlı olarak, connectDataConnectEmulator'ü çağırıp ardından Data Connect örneğini ileterek emülatöre bağlanabilirsiniz. Örneğin:

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

Üretim kaynaklarına geçmek için emülatöre bağlanma satırlarını yorumlayın.

React ve Angular için istemci kodunu uygulama

Firebase Data Connect, Invertase'daki iş ortaklarımızdan edinilebilen kitaplıkları kullanarak React ve Angular için kancaları içeren oluşturulmuş bir SDK sağlar.TanStack Query Firebase.

Bu kitaplık, uygulamalarınızda Firebase ile asenkron görevlerin işlenmesini büyük ölçüde kolaylaştıran bir dizi kanca sağlar.

Uygulamanızı ilk kullanıma hazırlayın

Öncelikle, tüm Firebase web uygulamalarında olduğu gibi, standart Firebase sırasını kullanarak uygulamanızı başlatın.

initializeApp({...});

TanStack Query Firebase paketlerini yükleme

Projenize TanStack Query paketlerini yükleyin.

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

ng add @angular/fire

React veya Angular SDK'nızı oluşturma

Daha önce açıklandığı gibi, standart web SDK'sında olduğu gibi Firebase araçları, şemanıza ve işlemlerinize göre SDK'ların otomatik olarak oluşturulmasını sağlar.

Projeniz için React SDK'sı oluşturmak üzere connector.yaml yapılandırma dosyanıza bir react anahtarı ekleyin.

generate:
  javascriptSdk:
    react: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

generate:
  javascriptSdk:
    angular: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

Kitaplıkları içe aktarma

React veya Angular istemci kodunuzu başlatmak için gereken dört içe aktarma grubu vardır: genel Data Connect içe aktarma işlemleri, genel TanStack içe aktarma işlemleri ve JS ile React tarafından oluşturulan SDK'larınıza özel içe aktarma işlemleri.

Genel içe aktarma işlemlerine dahil edilen ConnectorConfig türünü unutmayın.

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@myorg/connector/react";

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@myorg/connector/angular";

React veya Angular istemcinizde sorguları ve mutasyonları kullanma

Kurulum tamamlandığında, oluşturulan SDK'daki yöntemleri dahil edebilirsiniz.

Aşağıdaki snippet'te, oluşturulan SDK'dan React için use ön ekiyle başlayan yöntem useListAllMovies ve Angular için inject ön ekiyle başlayan yöntem injectListAllMovies'e dikkat edin.

import { useListAllMovies } from '@movies-app/movies/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
}

import { injectAllMovies, connectorConfig } from '@movies-app/movies/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

React ve Angular ile otomatik yeniden yükleme sorgularını kullanma

Sorguları, veriler değiştiğinde otomatik olarak yeniden yüklenecek şekilde yapılandırabilirsiniz.

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

Data Connect emülatörüne bağlanma

Dilerseniz connectDataConnectEmulator'ü çağırıp Data Connect örneğini oluşturulan kancanıza aktararak emülatöre bağlanabilirsiniz. Örneğin:

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

Üretim kaynaklarına geçmek için emülatöre bağlanma satırlarını yorumlayın.

SDK'daki veri türleri

Data Connect sunucusu, yaygın GraphQL veri türlerini temsil eder. Bunlar SDK'da aşağıdaki gibi gösterilir.

SDK oluşturma ile ilgili özel noktalar

Yolları node_modules'e göre yapılandırın

JavaScript SDK'sı için Data Connect, SDK'nızı yüklemek üzere npm link kullandığından, oluşturulan SDK'nızın node_modules yolunuzla aynı düzeyde bir dizine veya node_modules'ye erişebilen bir alt dizine yazılması gerekir.

Diğer bir deyişle, oluşturulan SDK'nızın düzgün çalışması için firebasedüğüm modülüne erişmesi gerekir.

Örneğin, node_modules dosyanız my-app/ klasöründeyse js-email-generated'ın üst klasörü node_modules'ten içe aktarabilmesi için çıkış dizininiz my-app/js-email-generated olmalıdır.

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

Alternatif olarak, modüllerinizin kökte barındırıldığı bir monorepo'nuz varsa çıkış dizininizi monorepo'nuzdaki herhangi bir klasöre yerleştirebilirsiniz.

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

Prototip oluşturma aşamasında SDK'ları güncelleme

Data Connect VS Code uzantısı ve Data Connect emülatörüyle etkileşimli olarak prototip oluşturuyorsanız şemaları, sorguları ve mutasyonları tanımlayan .gql dosyalarını değiştirirken SDK kaynak dosyaları otomatik olarak oluşturulur ve güncellenir. Bu özellik, sıcak (yeniden) yükleme iş akışlarında yararlı olabilir.

Alternatif olarak, .gql dosyaları değiştiğinde SDK'ları yeniden oluşturmak için KSA'yı kullanabilirsiniz:

firebase dataconnect:sdk:generate --watch

Entegrasyon ve üretim sürümleri için SDK'lar oluşturma

Proje kaynaklarını CI testlerine gönderilecek şekilde hazırlama gibi bazı senaryolarda toplu güncelleme için Firebase CLI'yi çağırabilirsiniz.

Bu durumlarda firebase dataconnect:sdk:generate simgesini kullanın.