Loading...
\n{:then posts}\n {#each posts as post}\n{post.title}
\n {/each}\n{/await}\n```\n\n### Example with variables\n\n```svelte\n\n\n{#await post}\nLoading...
\n{:then post}\n {#if post}\n{post.title}
\n {:else}\nPost not found
\n {/if}\n{/await}\n```\n\n### Example with additional settings\n\n```svelte\n\n```\n\n## Warnings\n\n- You can only use GraphQL operations in SvelteKit components and routes. You can't use them in other files.\n- Preprocessors currently supports only queries and mutations. Subscriptions are not supported yet.\n- When calling generated operations you cannot type any `)` character. This is because the preprocessor will think the function call is finished and will not generate the query.\n- Preproccessor currently only queries fields that are accessed in the markup part.\n- Preprocessor currently does not work in the very root +layout.svelte file. You need to use it in a child component.\n\n## Configuration\n\nFirst you need to decide where you want to store your GraphQL operations. You can store them in a separate directory or in the same directory as your components. The only requirement is that you need to be able to import them from your SvelteKit app.\nYou also need to decide whether you want to store your queries and mutations in separate files or in the same file. You can store them in the same file if you don't have many queries and mutations and all queries and mutations have unique names. Otherwise it is recommended to store them in separate files.\n\nYou also need to decide where you want to store your GraphQL schema types. The only requirement is that you need to be able to import it from your SvelteKit app.\n\nIn the following example we will store our GraphQL queries in `$lib/queries`, mutations in `$lib/mutations` and schema types `$type/graphql`.\n\n### Urql\n\nYou need to configure urql to use your GraphQL operations. You shoud do this in your `routes/+layout.svelte` file. You can do this by adding the following configuration:\n\n```svelte\n\n```\n\nMore information about configuring urql can be found in the [urql documentation](https://formidable.com/open-source/urql/docs/).\n\n### SvelteKit\n\nYou need to configure SvelteKit to preprocess your GraphQL operations. You can do this by creating a `svelte.config.js` file in the root of your project and adding the following configuration:\n\n```js\n// svelte.config.js\nimport { graphqlPreprocess } from \"@majksa/svelte-operations\";\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n preprocess: [\n graphqlPreprocess({\n queries: \"$lib/queries\",\n mutations: \"$lib/mutations\",\n }),\n ],\n kit: {\n // ... your SvelteKit configuration\n alias: {\n $type: \"./src/types\",\n },\n },\n};\n\nexport default config;\n```\n\n### Codegen\n\nYou need to configure GraphQL Code Generator to generate TypeScript types for your GraphQL operations. You can do this by creating a `codegen.yml` file in the root of your project and adding the following configuration:\n\n```yml\noverwrite: true\nschema: \"schema.graphql\"\ngenerates:\n src/types/graphql.ts:\n plugins:\n - add:\n content: [\"// THIS FILE IS GENERATED, DO NOT EDIT!\"]\n - typescript\n src/lib/queries.ts:\n plugins:\n - add:\n content: [\"// THIS FILE IS GENERATED, DO NOT EDIT!\"]\n - \"@majksa/svelte-operations\":\n queries: true\n types: \"$type/graphql\"\n\n src/lib/mutations.ts:\n plugins:\n - add:\n content: [\"// THIS FILE IS GENERATED, DO NOT EDIT!\"]\n - \"@majksa/svelte-operations\":\n mutations: true\n types: \"$type/graphql\"\n\nconfig:\n useTypeImports: true\n enumsAsTypes: true\n omitOperationSuffix: true\n dedupeOperationSuffix: true\n exportFragmentSpreadSubTypes: true\n experimentalFragmentVariables: true\n addUnderscoreToArgsType: true\n preResolveTypes: true\n namingConvention: keep\n scalars:\n Date: string\n DateTime: string\n```\n\nThe code generator will also import your GraphQL schema types as `Types` and additional options type as `Options`.\nYou can change those aliases by adding the following configuration:\n\n```yml\ngenerates:\n src/lib/queries.ts:\n plugins:\n - \"@majksa/svelte-operations\":\n queries: true\n types: \"$type/graphql\"\n typesAlias: \"Types\"\n optionsAlias: \"Options\"\n```\n","readmeFilename":"README.md"}