# graphql-codegen-sapper-apollo

> GraphQL Code Generator plugin to generate client queries from graphql

Latest version **0.1.6** (published 2020-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install graphql-codegen-sapper-apollo
pnpm add graphql-codegen-sapper-apollo
yarn add graphql-codegen-sapper-apollo
bun add graphql-codegen-sapper-apollo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-12-22 |
| First published | 2020-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 301.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Joon-ha Lee |
| Maintainers | joonha |
| Keywords | svelte, apollo, graphql, graphql-codegen |

## Links

- npm: https://www.npmjs.com/package/graphql-codegen-sapper-apollo
- Repository: https://github.com/iinow/graphql-codegen-svelte-apollo
- Homepage: https://github.com/iinow/graphql-codegen-svelte-apollo#readme
- Issues: https://github.com/iinow/graphql-codegen-svelte-apollo/issues
- npm.io page: https://npm.io/package/graphql-codegen-sapper-apollo

## Dependencies (6)

- [graphql](https://npm.io/package/graphql.md) ^15.3.0
- [camel-case](https://npm.io/package/camel-case.md) ^4.1.1
- [pascal-case](https://npm.io/package/pascal-case.md) ^3.1.1
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.2.7
- [@graphql-codegen/plugin-helpers](https://npm.io/package/@graphql-codegen/plugin-helpers.md) ^1.17.0
- [@graphql-codegen/visitor-plugin-common](https://npm.io/package/@graphql-codegen/visitor-plugin-common.md) ^1.17.15

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2020-12-22
- 0.1.5 — 2020-12-20
- 0.1.4 — 2020-12-20
- 0.1.3 — 2020-12-20

## README

# Sapper GraphQL generator for Apollo

GraphQL Code Generator plugin to use Apollo in Sapper with full Typescript support.

## Motivation

[Apollo](https://www.apollographql.com) and [graphql-code-generator](https://graphql-code-generator.com) 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

## Install

`npm i -S graphql-codegen-sapper-apollo`

## Configuration

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

Note: typescript and typescript-operations plugins are required.

## Example ApolloCient 

```typescript
let client: ApolloClient<any>

export default () => {
  if(!client) {
    client = new ApolloClient({
      cache,
      link,
      connectToDevTools: true,
    })
  }
  return client
}
```

## Example config

```yml
overwrite: true
schema:
    - 'https://myschema/graphql'
documents:
    - 'src/**/*.{graphql,gql,ts}'
generates:
    output.ts:
        plugins:
            - 'typescript'
            - 'typescript-operations'
            - 'graphql-codegen-sapper-apollo'
        config:
          clientPath: "PATH_TO_APOLLO_CLIENT"
hooks:
    afterAllFileWrite:
        - prettier --write

```

## Usage example

Take for example this query that will request all transactions for one ethereum address

```graphql
# app.gql

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

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

graphql-code-generator will generate:

```ts
export const TransactionsDoc = gql`
    fragment TransactionFragment on TransactionDescription {
        contractAddress
        from
        gasUsed
        gasPrice
        input
        isError
        to
        value
    }

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

export const Transactions = (
  options: Omit<QueryOptions<TransactionsQueryVariables>, "query">
): Readable<
  ApolloQueryResult<TransactionsQuery> & {
    query: ObservableQuery<TransactionsQuery, TransactionsQueryVariables>;
  }
> => {
  const q = client().watchQuery({
    query: TransactionsDoc,
    ...options,
  });
  var result = readable<
    ApolloQueryResult<TransactionsQuery> & {
      query: ObservableQuery<TransactionsQuery, TransactionsQueryVariables>;
    }
  >(
    { data: null, loading: true, error: null, networkStatus: 1, query: null },
    (set) => {
      q.subscribe((v) => {
        set({ ...v, query: q });
      });
    }
  );
  return result;
};

```

And use it as follow in your svelte file:

```html
<script lang="ts">
  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>
```

For a complete example implementation refer to the [example](https://github.com/ticruz38/graphql-codegen-svelte-apollo/tree/main/example) folder

---
_Source: https://npm.io/package/graphql-codegen-sapper-apollo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._