{"id":48152,"library":"houdini","title":"Houdini","description":"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.","status":"active","version":"1.5.10","language":"javascript","source_language":"en","source_url":"https://github.com/HoudiniGraphql/houdini","tags":["javascript","typescript","graphql","graphql-client"],"install":[{"cmd":"npm install houdini","lang":"bash","label":"npm"},{"cmd":"yarn add houdini","lang":"bash","label":"yarn"},{"cmd":"pnpm add houdini","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Houdini requires Vite as a build tool, specific versions ^5.3.3 || ^6.0.3","package":"vite","optional":false}],"imports":[{"note":"The generated $houdini module is used in SvelteKit projects. Direct import from 'houdini' is for internal usage or advanced scenarios.","wrong":"import { graphql } from 'houdini'","symbol":"graphql","correct":"import { graphql } from '$houdini'"},{"note":"Similar to graphql, queries are exported from the generated $houdini module.","wrong":"import { query } from 'houdini'","symbol":"query","correct":"import { query } from '$houdini'"},{"note":"Mutations are also from $houdini.","wrong":"import { mutation } from 'houdini'","symbol":"mutation","correct":"import { mutation } from '$houdini'"},{"note":"HoudiniClient is a named export from the generated module, not a default export.","wrong":"import HoudiniClient from 'houdini'","symbol":"HoudiniClient","correct":"import { HoudiniClient } from '$houdini'"},{"note":"For offset-based pagination, use paginate from $houdini.","wrong":"","symbol":"paginate","correct":"import { paginate } from '$houdini'"}],"quickstart":{"code":"// Install Houdini and generate client\n// npm install houdini\n// npx houdini init\n\n// In your SvelteKit app, define a GraphQL query in a .gql file:\n// src/routes/+page.gql\nquery GetUsers {\n  users {\n    id\n    name\n  }\n}\n\n// Then use in a Svelte component:\n<script>\n  import { graphql } from '$houdini';\n  import { query } from '$houdini';\n\n  const GetUsersQuery = graphql`\n    query GetUsers {\n      users {\n        id\n        name\n      }\n    }\n  `;\n\n  $: ({ data } = query(GetUsersQuery));\n</script>\n\n<ul>\n  {#each $data.users as user}\n    <li>{user.name}</li>\n  {/each}\n</ul>","lang":"typescript","description":"This shows how to set up a basic query in a SvelteKit app using Houdini's code generation and the $houdini module."},"warnings":[{"fix":"Update all imports to use '$houdini' instead of 'houdini'.","message":"Houdini v1.0 changed the import paths from 'houdini' to '$houdini'","severity":"breaking","affected_versions":"<1.0"},{"fix":"Replace @cache with @load or @once as appropriate.","message":"The `@cache` directive is deprecated in favor of `@load` and `@once`","severity":"deprecated","affected_versions":">=0.18"},{"fix":"Add a prebuild script: \"prebuild\": \"houdini generate\"","message":"Houdini generates TypeScript types automatically, but you must run `npx houdini generate` after changes","severity":"gotcha","affected_versions":"*"},{"fix":"Use $storeName syntax or subscribe properly.","message":"Reactivity works through Svelte stores; be careful not to destructure $data directly as it may lose reactivity","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'1.5.10':19 'activ':56 'address':62 'apollo':40 'applic':15 'automat':29 'away':80 'bug':66 'bundl':84 'cach':35 'cadenc':58 'client':9,38,41,99 'code':30,52,75 'current':16 'cut':6 'cutting-edg':5 'develop':26 'differenti':69 'disappear':72 'edg':7 'experi':27 'featur':64,73 'fix':67 'focus':21 'framework':10 'frequent':60 'generat':31 'graphql':8,96,98 'graphql-client':97 'houdini':1,2,42 'includ':70 'javascript':94 'key':68 'leverag':43 'like':39 'minim':50 'model':47 'produc':49 'provid':23 'reactiv':46 'releas':57 'requir':86 'result':81 'runtim':51 'safeti':33 'seamless':25 'shaken':79 'ship':91 'smaller':83 'svelt':14,45 'sveltekit':12,87 'tradit':37 'tree':78 'tree-shaken':77 'type':32,93 'typescript':92,95 'unlik':36 'unus':74 'updat':61 'version':18 'vite':89","created_at":"2026-06-07T16:55:10.524997+00:00","updated_at":"2026-06-07T16:55:10.524997+00:00","problems":[{"fix":"Run 'npx houdini generate' to generate the $houdini module.","cause":"The generated $houdini module is missing; likely you haven't run code generation.","error":"Cannot find module '$houdini' or its corresponding type declarations."},{"fix":"Ensure you have the Houdini Vite plugin in your vite.config.ts: import { houdini } from 'houdini/vite'; plugins: [houdini()]","cause":"The .gql file is not being processed; Houdini might not be properly configured in vite.config.ts","error":"Error: GraphQL validation error: Unknown type \"Query\""},{"fix":"Use {#if $data} or .then() to ensure data exists, or provide a loading state.","cause":"You are trying to access $data.users before the query has resolved.","error":"TypeError: Cannot read properties of undefined (reading 'users')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/HoudiniGraphql/houdini","github":"https://github.com/HoudiniGraphql/houdini","docs":null,"changelog":null,"pypi":null,"npm":"houdini","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}