#Recipes

Practical examples demonstrating different integration methods for soda-gql.

#Quick Comparison

#NestJS Integration

#TypeScript Compiler Plugin

Best for: Most projects, especially those preferring standard TypeScript tooling.

bun add -D @soda-gql/tsc-plugin

// nest-cli.json
{
  "compilerOptions": {
    "builder": "tsc",
    "plugins": ["@soda-gql/tsc-plugin"]
  }
}

View playground on GitHub

#Webpack Plugin with SWC

Best for: Projects needing working zero-runtime-like transformation today with fast builds.

bun add -D @soda-gql/webpack-plugin @soda-gql/swc-transformer

// webpack.config.js
const { SodaGqlWebpackPlugin } = require("@soda-gql/webpack-plugin");

module.exports = {
  plugins: [new SodaGqlWebpackPlugin({ transformer: "swc" })],
};

View playground on GitHub

#Vite Integration

For Vite-based projects:

bun add -D @soda-gql/vite-plugin

// vite.config.ts
import { defineConfig } from "vite";
import { sodaGqlPlugin } from "@soda-gql/vite-plugin";

export default defineConfig({
  plugins: [sodaGqlPlugin()],
});

#React Native / Expo Integration

For React Native projects using Metro bundler:

bun add -D @soda-gql/metro-plugin

View playground on GitHub

#Common Setup Steps

All integrations follow similar setup steps:

# 1. Install dependencies
bun install

# 2. Generate GraphQL system
bun run soda-gql codegen

# 3. Build your project
bun run build

#Learning Path

New to soda-gql? Follow this path:

1. Start with Next.js + Webpack - Full-featured setup with SWC
2. Explore Vite + React - Fragment colocation pattern
3. Try Expo + Metro - Mobile development

#More Playgrounds

See the full list of playgrounds in the GitHub repository.