Skip to Content
GuidesUsing UniformGen

Using UniformGen

UniformGen is Foir’s CLI tool for generating type-safe TypeScript code from your project schemas. It creates TypeScript interfaces, GraphQL documents, and React hooks based on your entity models.

Installation

# Install globally npm install -g @eide/uniformgen # Or use with npx (no installation required) npx @eide/uniformgen # Or add as a dev dependency npm install -D @eide/uniformgen

Quick Start

1. Login

npx uniformgen login

This opens a browser for authentication. After logging in, your credentials are stored locally.

2. Select a Project

npx uniformgen setup

Choose your tenant and project from the interactive menu.

3. Generate Code

npx uniformgen pull

This fetches your schemas and generates TypeScript code in src/generated/.

Commands

Authentication

uniformgen login # Authenticate with Foir uniformgen whoami # Check current auth status uniformgen logout # Clear stored credentials

Project Management

uniformgen setup # Configure project (interactive) uniformgen select-project # Switch to a different project

Code Generation

uniformgen pull # Generate code from schemas uniformgen pull --dry-run # Preview without writing files uniformgen pull -v # Verbose output

Schema Management

uniformgen push --schemas ./schemas # Push local schemas to project uniformgen sync --schemas ./schemas # Push schemas and regenerate code uniformgen init --schemas ./schemas # Create local schema files from project

Scaffolding

uniformgen scaffold --components ./src/components/foir

Generate React component boilerplate for your entity models.

Configuration

Create a uniformgen.config.ts in your project root:

import { defineConfig } from '@eide/uniformgen'; export default defineConfig({ // Where to write generated files output: { types: './src/generated/types', documents: './src/generated/documents', hooks: './src/generated/hooks', }, // Target framework framework: 'react', // 'react', 'remix', or 'agnostic' // Only generate specific models (optional) only: ['page', 'blog-post'], // Include inline-only schemas includeInline: true, // Format output with Prettier prettier: true, });

Generated Files

After running uniformgen pull, you’ll have:

src/generated/ ├── types/ │ ├── models/ │ │ ├── page.ts # Page interface │ │ ├── blog-post.ts # Blog post interface │ │ └── index.ts │ └── index.ts ├── documents/ │ ├── page.graphql # GraphQL operations │ └── blog-post.graphql └── hooks/ ├── page.ts # useGetPage, useListPages ├── blog-post.ts └── index.ts

Using Generated Code

Types

import type { Page, BlogPost } from '@/generated/types'; function renderPage(page: Page) { return <h1>{page.title}</h1>; }

Hooks

import { useGetPage, useListPages } from '@/generated/hooks'; function PageList() { const { data, loading } = useListPages({ limit: 10 }); if (loading) return <Loading />; return ( <ul> {data?.pages.items.map(page => ( <li key={page.id}>{page.title}</li> ))} </ul> ); } function PageDetail({ id }: { id: string }) { const { data } = useGetPage({ id }); return <h1>{data?.page.title}</h1>; }

CI/CD Integration

Regenerate types automatically when schemas change:

# .github/workflows/generate-types.yml name: Generate Types on: push: branches: [main] jobs: generate: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm ci - name: Generate types env: FOIR_API_KEY: ${{ secrets.FOIR_API_KEY }} run: | npx uniformgen pull \ --api-key $FOIR_API_KEY \ --project-key ${{ vars.FOIR_PROJECT_KEY }} - name: Commit changes run: | git config user.name "GitHub Actions" git config user.email "actions@github.com" git add src/generated git diff --staged --quiet || git commit -m "Update generated types" git push

Troubleshooting

”Not authenticated”

Run uniformgen login to authenticate.

”Project not found”

Run uniformgen setup to select a project.

”Permission denied”

Ensure your API key has the required scopes.

Types out of sync

Regenerate with npx uniformgen pull.

Next Steps

Last updated on