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/uniformgenQuick Start
1. Login
npx uniformgen loginThis opens a browser for authentication. After logging in, your credentials are stored locally.
2. Select a Project
npx uniformgen setupChoose your tenant and project from the interactive menu.
3. Generate Code
npx uniformgen pullThis 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 credentialsProject Management
uniformgen setup # Configure project (interactive)
uniformgen select-project # Switch to a different projectCode Generation
uniformgen pull # Generate code from schemas
uniformgen pull --dry-run # Preview without writing files
uniformgen pull -v # Verbose outputSchema 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 projectScaffolding
uniformgen scaffold --components ./src/components/foirGenerate 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.tsUsing 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 pushTroubleshooting
”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
- Using Foir Renderer - Render generated types
- Creating API Keys - Set up API authentication
- Core Concepts - Understand the platform