Typescript Svelte Apollo

GraphQL Code Generator plugin to use Apollo in Svelte with full Typescript support.
Because Svelte and Apollo share the same reactive programming, Apollo queries are treated like Svelte store.
Hence that generator is all you need if you want to use Apollo with Svelte.
See a live example here, the code for this is in the /example folder

Motivation

Apollo and graphql-code-generator are a powerfull combination for data management in the front-end.
Unlike other big frameworks, Svelte was still missing a graphql-code-generator plugin for client queries.
It turns out that Svelte with its reactive programming, is particularly well designed to be used together with Apollo

Note

graphql-codegen-svelte-apollo is a plugin for graphql-code-generator ecosystem, please refer to their website for documentation relative to the configuration in codegen.yml

Installation

Ensure that your project contains all needed dependencies for this plugin

``shell
npm i -S graphql

npm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql-codegen-svelte-apollo
`

API Reference

$3

type: string
default: null
required: true

Path to the apollo client for this project (should point to a file with an apollo-client as default export)

#### Usage Examples

`yml
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- graphql-codegen-svelte-apollo
config:
clientPath: PATH_TO_APOLLO_CLIENT
`

$3


type: boolean
default: false

By default, the plugin only generate observable queries, sometimes it may be useful to generate promise-based queries

#### Usage Examples

`yml
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- graphql-codegen-svelte-apollo
config:
clientPath: PATH_TO_APOLLO_CLIENT
asyncQuery: true
`

Usage Example

$3

For the given input:

`graphql
fragment TransactionFragment on TransactionDescription {
contractAddress
from
gasUsed
gasPrice
input
isError
to
value
}

query Transactions($address: String) {
transactions(address: $address) {
...TransactionFragment
}
}
`

And the following configuration:

`yaml
schema: YOUR_SCHEMA_HERE
documents: "./src/*/.graphql"
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- graphql-codegen-svelte-apollo
config:
clientPath: PATH_TO_APOLLO_CLIENT
`

Codegen will pre-compile the GraphQL operation into a DocumentNode object, and generate a ready-to-use Apollo query for each operation you have.

In you application code, you can import it from the generated file, and use the query in your component code:

`html


{#each $t?.data?.transactions || [] as transaction}

• Sent transaction from {transaction.from} to {transaction.to}

{/each}


`

Each time you change the address, the query will re-fetch and show the new results in the template.

$3

Sometimes, you may need/prefer to have an async query (only available with asyncQuery option set to true)

For the given input:

`graphql
fragment TransactionFragment on TransactionDescription {
contractAddress
from
gasUsed
gasPrice
input
isError
to
value
}

query Transactions($address: String) {
transactions(address: $address) {
...TransactionFragment
}
}
`

And the following configuration:

`yaml
schema: YOUR_SCHEMA_HERE
documents: "./src/*/.graphql"
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- graphql-codegen-svelte-apollo
config:
clientPath: PATH_TO_APOLLO_CLIENT
asyncQuery: true
`

Codegen will pre-compile the GraphQL operation into a DocumentNode object, and generate a ready-to-use Apollo query for each operation you have.

In you application code, you can import it from the generated file, and use the query in your component code:

`html


{#await AsyncTransactions({ address })}
Loading...
{:then transactions}
{#each transactions || [] as transaction}

• Sent transaction from {transaction.from} to {transaction.to}

{/each}
{/await}


``