Codegen
On this page

TypeScript Svelte Apollo

This plugin generates observable Apollo queries with Typescript typings. This is a community plugin, to report eventual issues or find more examples, refer to this repository

Version
1.1.0
Weekly downloads
1k
License
MIT
Updated
Dec 6, 2021

Installation

          npm i -D graphql-codegen-svelte-apollo

This plugin generates observable Apollo queries with Typescript typings.

This is a community plugin, to report eventual issues or find more examples, refer to this repository

It extends the basic TypeScript plugins: @graphql-codegen/typescript, @graphql-codegen/typescript-operations - and thus shares a similar configuration.

API Reference

clientPath

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

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT'
      }
    }
  }
}
export default config

asyncQuery

type: boolean default: false

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

Usage Examples

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT',
        asyncQuery: true
      }
    }
  }
}
export default config

Usage Example

With Observable queries

For the given input:

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

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

And the following configuration:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT'
      }
    }
  }
}
export default config

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 your application code, you can import it from the generated file, and use the query in your component code:

<script lang="ts">
  import { Transactions } from 'codegen'

  var address = '0x0000000000000000000000000000'
  $: t = Transactions({ address })
</script>

<ul>
  {#each $t?.data?.transactions || [] as transaction}
    <li>Sent transaction from {transaction.from} to {transaction.to}</li>
  {/each}
</ul>

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

With Async Queries

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

For the given input:

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

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

And the following configuration:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT',
        asyncQuery: true
      }
    }
  }
}
export default config

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 your application code, you can import it from the generated file, and use the query in your component code:

<script lang="ts">
  import { AsyncTransactions } from 'codegen'

  var address = '0x0000000000000000000000000000'
</script>

<ul>
  {#await AsyncTransactions({ address })}
    Loading…
  {:then transactions}
    {#each transactions || [] as transaction}
      <li>Sent transaction from {transaction.from} to {transaction.to}</li>
    {/each}
  {/await}
</ul>