GraphQL Code Generator plugin to generate client queries from graphql
npm install graphql-codegen-svelte-apolloApollo 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
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
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
`
type: stringnull
default:
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
default: falseBy 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}
``