Gathering detailed insights and metrics for @nerd-coder/graphql-codegen-svelte-queries
Gathering detailed insights and metrics for @nerd-coder/graphql-codegen-svelte-queries
Codegen plugins to generate fully typed queries for Svelte + Apollo
0.8.2
2
TypeScript
568.37 kB
Installations
npm install @nerd-coder/graphql-codegen-svelte-queriesDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.16.0
NPM Version
9.5.1
Languages
2
TypeScript
JavaScript
TypeScript (94.79%)
JavaScript (5.21%)
Developer
nerd-coder
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
2 Stars
41 Commits
1 Forks
1 Watchers
3 Branches
1 Contributors
Updated on Aug 08, 2023
Maintainers
1
Package Meta Information
Latest Version
0.8.2
Package Id
@nerd-coder/graphql-codegen-svelte-queries@0.8.2
Unpacked Size
568.37 kB
Size
153.95 kB
File Count
49
NPM Version
9.5.1
Node Version
18.16.0
Published on
Jun 25, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
21
@apollo/client@graphql-codegen/plugin-helpers@graphql-codegen/typescript@graphql-codegen/typescript-operations@graphql-codegen/visitor-plugin-common@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-typescript@typescript-eslint/eslint-plugin@urql/svelteconcurrentlyeslinteslint-config-prettiergraphqlprettierrelease-itrolluprollup-plugin-filesizesveltevite-tsconfig-pathsvitest
Svelte x Apollo x Urql - GrapqhQL Codegen Plugin
GraphQL Code Generator plugin to use Apollo or Urql in Svelte with full Typescript support
Motivation
Inspired by ticruz38's work. Since ticruz38 didn't seem to update his repo anymore, I decieded to continue his work by creating this repo. And also added support for Urql queries.
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
1npm i -S graphql 2 3npm i -D @graphql-codegen/cli 4npm i -D @graphql-codegen/typescript 5npm i -D @graphql-codegen/typescript-operations 6npm i -D @nerd-coder/graphql-codegen-svelte-queries
API Reference
clientPath
- type:
string - required: true
Path to the apollo or urql client for this project (should point to a file with an the client as default export)
1generates: 2path/to/file.ts: 3 plugins: 4 - typescript 5 - typescript-operations 6 - graphql-codegen-svelte-apollo 7 config: 8 clientPath: PATH_TO_APOLLO_CLIENT 9 clientType: apollo
clientType
- type:
'apollo' | 'urql' - required: true
Client type to generate
1generates: 2path/to/file.ts: 3 plugins: 4 - typescript 5 - typescript-operations 6 - graphql-codegen-svelte-apollo 7 config: 8 clientPath: PATH_TO_APOLLO_CLIENT 9 clientType: apollo
asyncQuery
- type:
boolean - default:
false
By default, the plugin only generate observable queries, sometimes it may be useful to generate promise-based queries
1generates: 2path/to/file.ts: 3 plugins: 4 - typescript 5 - typescript-operations 6 - @nerd-coder/graphql-codegen-svelte-queries 7 config: 8 clientPath: PATH_TO_APOLLO_CLIENT 9 clientType: apollo 10 asyncQuery: true
importFrom
- type:
string - default:
''
When provided, import types from the generated typescript types file path. if not given, omit import statement.
I you're not using this config, it's recommended to also specify those additional config options for lean code generation:
noExport: trueonlyOperationTypes: true
(Those config abolve are belong to TypeScriptDocumentsPluginConfig type in @graphql-codegen/typescript-operations package)
Usage Example
With Observable queries
For the given input:
1fragment TransactionFragment on TransactionDescription { 2 contractAddress 3 from 4 gasUsed 5 gasPrice 6 input 7 isError 8 to 9 value 10} 11 12query Transactions($address: String) { 13 transactions(address: $address) { 14 ...TransactionFragment 15 } 16}
And the following configuration:
1schema: YOUR_SCHEMA_HERE 2documents: './src/**/*.graphql' 3generates: 4path/to/file.ts: 5 plugins: 6 - typescript 7 - typescript-operations 8 - @nerd-coder/graphql-codegen-svelte-queries 9 config: 10 clientPath: PATH_TO_APOLLO_CLIENT 11 clientType: apollo
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:
1<script lang="ts"> 2 import { Transactions } from 'codegen' 3 4 var address = '0x0000000000000000000000000000' 5 $: ({ rawData, loading, errorMessages } = Transactions({ address })) 6</script> 7 8{#if $loading} 9 <p>Loading ...</p> 10{:else if $errorMessages.length} 11 <p>{$errorMessages.join()}</p> 12{:else} 13 <ul> 14 {#each $rawData || [] as transaction} 15 <li>Sent transaction from {transaction.from} to {transaction.to}</li> 16 {:else} 17 <li>No data available!</li> 18 {/each} 19 </ul> 20{/if}
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:
1fragment TransactionFragment on TransactionDescription { 2 contractAddress 3 from 4 gasUsed 5 gasPrice 6 input 7 isError 8 to 9 value 10} 11 12query Transactions($address: String) { 13 transactions(address: $address) { 14 ...TransactionFragment 15 } 16}
And the following configuration:
1schema: YOUR_SCHEMA_HERE 2documents: './src/**/*.graphql' 3generates: 4path/to/file.ts: 5 plugins: 6 - typescript 7 - typescript-operations 8 - graphql-codegen-svelte-apollo 9 config: 10 clientPath: PATH_TO_APOLLO_CLIENT 11 clientType: apollo 12 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:
1<script lang="ts"> 2 import { AsyncTransactions } from 'codegen' 3 4 var address = '0x0000000000000000000000000000' 5</script> 6 7<ul> 8 {#await AsyncTransactions({ address })} Loading... {:then transactions} {#each transactions || [] 9 as transaction} 10 <li>Sent transaction from {transaction.from} to {transaction.to}</li> 11 {/each} {/await} 12</ul>
TODO
- Add more example
No vulnerabilities found.
No security vulnerabilities found.