houdini

library1.5.10jsnpmunverified

Houdini is a cutting-edge GraphQL client framework for SvelteKit and Svelte applications, currently at version 1.5.10. It focuses on providing a seamless developer experience with automatic code generation, type safety, and caching. Unlike traditional clients like Apollo Client, Houdini leverages the Svelte reactivity model to produce minimal runtime code. It has an active release cadence, with frequent updates addressing both features and bug fixes. Key differentiators include its disappearing feature - unused code is tree-shaken away, resulting in smaller bundles. It requires SvelteKit and Vite, and ships TypeScript types.

devops

npm install houdini

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · HOUDINI

houdini

devopsjavascriptv1.5.10

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

graphql

✓ import { graphql } from '$houdini'

✗ import { graphql } from 'houdini'

The generated $houdini module is used in SvelteKit projects. Direct import from 'houdini' is for internal usage or advanced scenarios.

query

✓ import { query } from '$houdini'

✗ import { query } from 'houdini'

Similar to graphql, queries are exported from the generated $houdini module.

mutation

✓ import { mutation } from '$houdini'

✗ import { mutation } from 'houdini'

Mutations are also from $houdini.

HoudiniClient

✓ import { HoudiniClient } from '$houdini'

✗ import HoudiniClient from 'houdini'

HoudiniClient is a named export from the generated module, not a default export.

paginate

✓ import { paginate } from '$houdini'

For offset-based pagination, use paginate from $houdini.

This shows how to set up a basic query in a SvelteKit app using Houdini's code generation and the $houdini module.

// Install Houdini and generate client // npm install houdini // npx houdini init // In your SvelteKit app, define a GraphQL query in a .gql file: // src/routes/+page.gql query GetUsers { users { id name } } // Then use in a Svelte component: <script> import { graphql } from '$houdini'; import { query } from '$houdini'; const GetUsersQuery = graphql` query GetUsers { users { id name } } `; $: ({ data } = query(GetUsersQuery)); </script> <ul> {#each $data.users as user} <li>{user.name}</li> {/each} </ul>

Debug

Known issues

breakingHoudini v1.0 changed the import paths from 'houdini' to '$houdini'

fix

Update all imports to use '$houdini' instead of 'houdini'.

affects: <1.0

deprecatedThe `@cache` directive is deprecated in favor of `@load` and `@once`

fix

Replace @cache with @load or @once as appropriate.

affects: >=0.18

gotchaHoudini generates TypeScript types automatically, but you must run `npx houdini generate` after changes

fix

Add a prebuild script: "prebuild": "houdini generate"

affects: *

gotchaReactivity works through Svelte stores; be careful not to destructure $data directly as it may lose reactivity

fix

Use $storeName syntax or subscribe properly.

affects: *

Errors

Common errors & fixes

Cannot find module '$houdini' or its corresponding type declarations.

The generated $houdini module is missing; likely you haven't run code generation.

fix

Run 'npx houdini generate' to generate the $houdini module.

Error: GraphQL validation error: Unknown type "Query"

The .gql file is not being processed; Houdini might not be properly configured in vite.config.ts

fix

Ensure you have the Houdini Vite plugin in your vite.config.ts: import { houdini } from 'houdini/vite'; plugins: [houdini()]

TypeError: Cannot read properties of undefined (reading 'users')

You are trying to access $data.users before the query has resolved.

fix

Use {#if $data} or .then() to ensure data exists, or provide a loading state.

Upgrade

Version history

1.5.10latest on npm

Audit

Dependencies

viterequiredHoudini requires Vite as a build tool, specific versions ^5.3.3 || ^6.0.3

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/HoudiniGraphql/houdini ↗

packagehoudini ↗

homepagehttps://github.com/HoudiniGraphql/houdini ↗