Oluşturulan web SDK'larını kullanı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. Şemaları, sorguları ve mutasyonları tasarlarken özel bir istemci SDK'sı oluşturursunuz. Bu SDK'yı Data Connect hizmetinize dağıtırsınız. Ardından, bu SDK'daki yöntemleri istemci mantığınıza entegre edersiniz.

Başka bir yerde de belirttiğimiz gibi, Data Connect sorguların ve mutasyonların istemci kodu tarafından gönderilmediğini ve sunucuda yürütülmediğini unutmamak önemlidir. Bunun yerine, dağıtıldığında Data Connect işlemleri Cloud Functions gibi sunucuda depolanır. Bu nedenle, mevcut kullanıcıların (ör. uygulamanın eski sürümlerinde) deneyimini bozmamak için ilgili istemci tarafı değişikliklerini dağıtmanız gerekir.

Bu nedenle Data Connect, sunucuya dağıtılan şemalarınızı, sorgularınızı ve mutasyonlarınızı prototip oluşturmanıza olanak tanıyan bir geliştirme ortamı ve araçlar sunar. Ayrıca, prototip oluştururken istemci tarafı SDK'larını otomatik olarak oluşturur.

Hizmetinizde ve istemci uygulamalarınızda güncellemeleri yineledikten sonra hem sunucu hem de istemci tarafı güncellemeleri dağıtıma hazır olur.

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

Başlangıç bölümünü incelediyseniz Data Connect için genel geliştirme akışıyla tanışmışsınızdır. Bu kılavuzda, şemanızdan Web SDK'ları oluşturma ve istemci sorguları ile mutasyonlarla çalışma hakkında daha ayrıntılı bilgi edinebilirsiniz.

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

1. Firebase'i web uygulamanıza ekleyin.

Ardından:

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

4. SDK oluşturmayı ayarlayın:

   • Veri Bağlantısı VS Code uzantımızdaki SDK'yı uygulamaya ekle düğmesiyle
   • JavaScript SDK için connector.yaml'nızı veya React ya da Angular'ı güncelleyerek.

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

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

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

Firebase JavaScript SDK'sı ile istemci kodu 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 alternatif kurulum talimatlarını ve çerçeveler için Data Connect SDK'ları oluşturma hakkında ek dokümanlara yönelik bağlantıları inceleyin.

Uygulamanızı başlatma

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

initializeApp({...});

JavaScript SDK'nızı oluşturma

Çoğu Firebase projesinde olduğu gibi, Firebase Data Connect istemci kodunuzla ilgili çalışmalar yerel bir proje dizininde yapılır. Hem Data Connect VS Code uzantısı hem de Firebase CLI, istemci kodu oluşturma ve yönetme için önemli yerel araçlardır.

SDK oluşturma seçenekleri, projenizi ilk kullanıma hazırladığınızda oluşturulan dataconnect.yaml dosyasındaki çeşitli girişlere göre belirlenir.

SDK oluşturmayı başlatma

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

outputDir, oluşturulan SDK'nın nereye çıkış yapacağını belirtir.

package, paket adını belirtir.

packageJsonDir paketin nereye yükleneceğini belirtir.

Bu durumda, bu bağımlılığın karşılanması için firebase@latest öğesini yükleyin.

JavaScript SDK'sını başlatma

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

ConnectorConfig nesnesi

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

Bu nesne, dataconnect.yaml içindeki serviceId ve location ile connector.yaml içindeki connectorId öğelerinden otomatik olarak oluşturulur.

Kitaplıkları içe aktarma

İstemci kodunuzu başlatmak için iki grup içe aktarma işlemi gerekir: genel Data Connect içe aktarma işlemleri ve belirli, oluşturulmuş SDK içe aktarma işlemleri.

Genel içe aktarmalara 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ından sorguları kullanma

Oluşturulan kodda önceden tanımlanmış sorgu referansları bulunur. Tek yapmanız gereken bunları içe aktarmak ve çalıştırmak.

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

Bu işlem kısayolu işlevlerinin kullanıldığı bir örneği aşağıda bulabilirsiniz:

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 değişiklikler, sorgu yürüttüğünüz her seferde 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

Dilerseniz connectDataConnectEmulator işlevini çağırıp 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ı yorum satırı yapın.

React ve Angular için istemci kodu uygulama

Firebase Data Connect, Invertase'deki iş ortaklarımızdan edinilebilen kitaplıkları kullanarak React ve Angular için kancalar içeren bir SDK oluşturur: TanStack Query Firebase.

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

Uygulamanızı başlatma

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

initializeApp({...});

TanStack Query Firebase paketlerini yükleyin

Projenizde TanStack Query için paketler 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şturun

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 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 dört grup içe aktarma işlemi gerekir: 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ız için özel içe aktarma işlemleri.

Genel içe aktarma işlemlerine dahil edilen ConnectorConfig türüne dikkat edin.

// 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 sorgu ve mutasyon kullanma

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

Aşağıdaki snippet'te, oluşturulan SDK'dan alınan React için use önekli useListAllMovies yöntemine ve Angular için inject önekli injectListAllMovies yöntemine 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

Veriler değiştiğinde sorguları 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

İsteğe bağlı olarak, connectDataConnectEmulator numaralı telefonu arayıp Data Connect örneğini oluşturduğunuz kancaya ileterek 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ı yorum satırı yapı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şturmayla ilgili dikkat edilmesi gereken noktalar

Yolları node_modules'ya göre yapılandırma

JavaScript SDK'sında, Data Connect SDK'nızı yüklemek için npm link kullandığından oluşturulan SDK'nız node_modules yoluyla aynı düzeydeki bir dizine veya node_modules'ye erişebilen bir alt dizine çıkış olarak verilmelidir.

Diğer bir deyişle, oluşturulan SDK'nızın doğru çalışması için firebase node modülüne erişmesi gerekir.

Örneğin, node_modules dosyanız my-app/ klasöründe bulunuyorsa js-email-generated öğesinin üst klasörü node_modules'dan 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 monoreponuz varsa çıkış dizininizi monoreponuzdaki 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ştururken SDK'ları güncelleme

Data Connect VS Code uzantısı ve Data Connect emülatörü ile etkileşimli 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ı her değiştirildiğ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

CI testlerine göndermek üzere proje kaynaklarını hazırlama gibi bazı senaryolarda, toplu güncelleme için Firebase CLI'yı çağırabilirsiniz.

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