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. 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ın ve mutasyonlarının istemci kodu tarafından gönderilmediğini ve sunucuda yürütülmediğini belirtmek önemlidir. 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.

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 kullanıyorsanız Data Connect için React SDK'ları oluşturma ile ilgili 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 başlattığınızda oluşturulan dataconnect.yamldosyasındaki ç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 kez çalıştırmak 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

Dilerseniz connectDataConnectEmulator'ü ç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ı yorumlayın.

React için istemci kodunu uygulama

Firebase Data Connect, Invertase'daki iş ortaklarımızdan edinilebilen TanStack Query Firebase kitaplığını kullanarak React için kanca içeren bir SDK sağlar.

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

TanStack Query paketlerini projenize 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

React 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: "../../"

Kitaplıkları içe aktarma

React 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 ve 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ü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";

React istemcinizde sorgular ve mutasyonlar kullanma

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

Aşağıdaki snippet'te, oluşturulan React SDK'sındaki use ön ekiyle başlayan yönteme useListAllMovies dikkat edin. Oluşturulan SDK'daki bu tür tüm use işlemleri (hem sorgular hem de mutasyonlar) TanStack Query bağlamalarını çağırır:

• Sorgular, TanStack useDataConnectQuery kancasını çağırır ve döndürür.
• Değişiklikler, TanStack useDataConnectMutation kancasını çağırır ve döndürür

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>
}

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);

function App() {
  ...
  const { isLoading, data, error } = useListAllMovies(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.

Diğer çerçevelerle ilgili dikkat edilmesi gereken noktalar

Angular

Kod oluştururken Angular CLI, bağımlılık optimizasyon kodu nedeniyle yeni değişiklikleri algılamaz. Bu sorunu düzeltmek için angular.json dosyanızı değiştirmeniz gerekir.

  "projects": {
    "myproject": {
      "architect": {
        "serve:": {
          "prebundle": {
            "exclude": ["@movie-app/movies"]
          }
        }
      }
    }
  }