Generate dataconnect SDK in CI instead of tracking web artifacts
This commit is contained in:
zouantchaw
10
.github/workflows/web-quality.yml
vendored
10
.github/workflows/web-quality.yml
vendored
@@ -33,6 +33,16 @@ jobs:
|
||||
cache: pnpm
|
||||
cache-dependency-path: apps/web/pnpm-lock.yaml
|
||||
|
||||
- name: Setup Firebase CLI
|
||||
working-directory: .
|
||||
run: npm install -g firebase-tools
|
||||
|
||||
- name: Generate Data Connect SDK
|
||||
working-directory: .
|
||||
run: |
|
||||
cp backend/dataconnect/dataconnect.dev.yaml backend/dataconnect/dataconnect.yaml
|
||||
firebase dataconnect:sdk:generate --non-interactive
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -184,7 +184,3 @@ krow-workforce-export-latest/
|
||||
# Data Connect Generated SDKs (Explicit)
|
||||
apps/mobile/packages/data_connect/lib/src/dataconnect_generated/
|
||||
apps/web/src/dataconnect-generated/
|
||||
|
||||
# Keep web Data Connect SDK in repo so web CI builds don't depend on runtime generation
|
||||
!apps/web/src/dataconnect-generated/
|
||||
!apps/web/src/dataconnect-generated/**
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"description": "A set of guides for interacting with the generated firebase dataconnect sdk",
|
||||
"mcpServers": {
|
||||
"firebase": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "firebase-tools@latest", "experimental:mcp"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
# Setup
|
||||
|
||||
If the user hasn't already installed the SDK, always run the user's node package manager of choice, and install the package in the directory ../package.json.
|
||||
For more information on where the library is located, look at the connector.yaml file.
|
||||
|
||||
```ts
|
||||
import { initializeApp } from 'firebase/app';
|
||||
|
||||
initializeApp({
|
||||
// fill in your project config here using the values from your Firebase project or from the `firebase_get_sdk_config` tool from the Firebase MCP server.
|
||||
});
|
||||
```
|
||||
|
||||
Then, you can run the SDK as needed.
|
||||
```ts
|
||||
import { ... } from '@dataconnect/generated';
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## React
|
||||
### Setup
|
||||
|
||||
The user should make sure to install the `@tanstack/react-query` package, along with `@tanstack-query-firebase/react` and `firebase`.
|
||||
|
||||
Then, they should initialize Firebase:
|
||||
```ts
|
||||
import { initializeApp } from 'firebase/app';
|
||||
initializeApp(firebaseConfig); /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */
|
||||
```
|
||||
|
||||
Then, they should add a `QueryClientProvider` to their root of their application.
|
||||
|
||||
Here's an example:
|
||||
|
||||
```ts
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
|
||||
const firebaseConfig = {
|
||||
/* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */
|
||||
};
|
||||
|
||||
// Initialize Firebase
|
||||
const app = initializeApp(firebaseConfig);
|
||||
|
||||
// Create a TanStack Query client instance
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
function App() {
|
||||
return (
|
||||
// Provide the client to your App
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MyApplication />
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
|
||||
render(<App />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
# Basic Usage
|
||||
|
||||
Always prioritize using a supported framework over using the generated SDK
|
||||
directly. Supported frameworks simplify the developer experience and help ensure
|
||||
best practices are followed.
|
||||
|
||||
|
||||
|
||||
|
||||
### React
|
||||
For each operation, there is a wrapper hook that can be used to call the operation.
|
||||
|
||||
Here are all of the hooks that get generated:
|
||||
```ts
|
||||
import { useCreateBenefitsData, useUpdateBenefitsData, useDeleteBenefitsData, useListShifts, useGetShiftById, useFilterShifts, useGetShiftsByBusinessId, useGetShiftsByVendorId, useCreateStaffDocument, useUpdateStaffDocument } from '@dataconnect/generated/react';
|
||||
// The types of these hooks are available in react/index.d.ts
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateBenefitsData(createBenefitsDataVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useUpdateBenefitsData(updateBenefitsDataVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useDeleteBenefitsData(deleteBenefitsDataVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useListShifts(listShiftsVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useGetShiftById(getShiftByIdVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useFilterShifts(filterShiftsVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useGetShiftsByBusinessId(getShiftsByBusinessIdVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useGetShiftsByVendorId(getShiftsByVendorIdVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateStaffDocument(createStaffDocumentVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useUpdateStaffDocument(updateStaffDocumentVars);
|
||||
|
||||
```
|
||||
|
||||
Here's an example from a different generated SDK:
|
||||
|
||||
```ts
|
||||
import { useListAllMovies } from '@dataconnect/generated/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>
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Advanced Usage
|
||||
If a user is not using a supported framework, they can use the generated SDK directly.
|
||||
|
||||
Here's an example of how to use it with the first 5 operations:
|
||||
|
||||
```js
|
||||
import { createBenefitsData, updateBenefitsData, deleteBenefitsData, listShifts, getShiftById, filterShifts, getShiftsByBusinessId, getShiftsByVendorId, createStaffDocument, updateStaffDocument } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Operation createBenefitsData: For variables, look at type CreateBenefitsDataVars in ../index.d.ts
|
||||
const { data } = await CreateBenefitsData(dataConnect, createBenefitsDataVars);
|
||||
|
||||
// Operation updateBenefitsData: For variables, look at type UpdateBenefitsDataVars in ../index.d.ts
|
||||
const { data } = await UpdateBenefitsData(dataConnect, updateBenefitsDataVars);
|
||||
|
||||
// Operation deleteBenefitsData: For variables, look at type DeleteBenefitsDataVars in ../index.d.ts
|
||||
const { data } = await DeleteBenefitsData(dataConnect, deleteBenefitsDataVars);
|
||||
|
||||
// Operation listShifts: For variables, look at type ListShiftsVars in ../index.d.ts
|
||||
const { data } = await ListShifts(dataConnect, listShiftsVars);
|
||||
|
||||
// Operation getShiftById: For variables, look at type GetShiftByIdVars in ../index.d.ts
|
||||
const { data } = await GetShiftById(dataConnect, getShiftByIdVars);
|
||||
|
||||
// Operation filterShifts: For variables, look at type FilterShiftsVars in ../index.d.ts
|
||||
const { data } = await FilterShifts(dataConnect, filterShiftsVars);
|
||||
|
||||
// Operation getShiftsByBusinessId: For variables, look at type GetShiftsByBusinessIdVars in ../index.d.ts
|
||||
const { data } = await GetShiftsByBusinessId(dataConnect, getShiftsByBusinessIdVars);
|
||||
|
||||
// Operation getShiftsByVendorId: For variables, look at type GetShiftsByVendorIdVars in ../index.d.ts
|
||||
const { data } = await GetShiftsByVendorId(dataConnect, getShiftsByVendorIdVars);
|
||||
|
||||
// Operation createStaffDocument: For variables, look at type CreateStaffDocumentVars in ../index.d.ts
|
||||
const { data } = await CreateStaffDocument(dataConnect, createStaffDocumentVars);
|
||||
|
||||
// Operation updateStaffDocument: For variables, look at type UpdateStaffDocumentVars in ../index.d.ts
|
||||
const { data } = await UpdateStaffDocument(dataConnect, updateStaffDocumentVars);
|
||||
|
||||
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
{"type":"module"}
|
||||
File diff suppressed because it is too large
Load Diff
14108
apps/web/src/dataconnect-generated/index.d.ts
vendored
14108
apps/web/src/dataconnect-generated/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "@dataconnect/generated",
|
||||
"version": "1.0.0",
|
||||
"author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",
|
||||
"description": "Generated SDK For example",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": " >=18.0"
|
||||
},
|
||||
"typings": "index.d.ts",
|
||||
"module": "esm/index.esm.js",
|
||||
"main": "index.cjs.js",
|
||||
"browser": "esm/index.esm.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./index.d.ts",
|
||||
"require": "./index.cjs.js",
|
||||
"default": "./esm/index.esm.js"
|
||||
},
|
||||
"./react": {
|
||||
"types": "./react/index.d.ts",
|
||||
"require": "./react/index.cjs.js",
|
||||
"import": "./react/esm/index.esm.js",
|
||||
"default": "./react/esm/index.esm.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"firebase": "^11.3.0 || ^12.0.0",
|
||||
"@tanstack-query-firebase/react": "^2.0.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
{"type":"module"}
|
||||
File diff suppressed because one or more lines are too long
1125
apps/web/src/dataconnect-generated/react/index.d.ts
vendored
1125
apps/web/src/dataconnect-generated/react/index.d.ts
vendored
File diff suppressed because one or more lines are too long
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"name": "@dataconnect/generated-react",
|
||||
"version": "1.0.0",
|
||||
"author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",
|
||||
"description": "Generated SDK For example",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": " >=18.0"
|
||||
},
|
||||
"typings": "index.d.ts",
|
||||
"main": "index.cjs.js",
|
||||
"module": "esm/index.esm.js",
|
||||
"browser": "esm/index.esm.js",
|
||||
"peerDependencies": {
|
||||
"@tanstack-query-firebase/react": "^2.0.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user