• Plugins
  • TypeScript
  • svelte-apollo
Package nameWeekly DownloadsVersionLicenseUpdated
graphql-codegen-svelte-apolloDownloadsVersionLicenseMay 4th, 2022

Installation

yarn add -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

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

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

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

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:

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 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:

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 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>
Last updated on August 10, 2022
stencil-apollotype-graphql