https://github.com/artemkloko/amplify-graphql-apollo-hooks-generator
Generate boilerplate React Apollo hooks for queries, mutations and subscriptions for the provided introspection schema
https://github.com/artemkloko/amplify-graphql-apollo-hooks-generator
apollo appsync aws graphql hooks react
Last synced: 9 months ago
JSON representation
Generate boilerplate React Apollo hooks for queries, mutations and subscriptions for the provided introspection schema
- Host: GitHub
- URL: https://github.com/artemkloko/amplify-graphql-apollo-hooks-generator
- Owner: artemkloko
- Created: 2020-11-20T10:33:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-20T13:36:14.000Z (over 5 years ago)
- Last Synced: 2025-09-03T11:56:05.854Z (9 months ago)
- Topics: apollo, appsync, aws, graphql, hooks, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/amplify-graphql-apollo-hooks-generator
- Size: 136 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# amplify-graphql-apollo-hooks-generator
Generate boilerplate React Apollo hooks for queries, mutations and subscriptions for the provided introspection schema.
---
The generated hooks are just basic wrappers for Apollo hooks provided by `@apollo/client` and they do not offer any extra capabilities from what the Apollo hooks offer.
The only gain of using this plugin is to not waste time on creating and updating those hooks manually after schema changes. And it's especially usefull while bootstraping a new project.
---
Some examples of generated hooks
```typescript
export const useGetUserQuery = (
options?: QueryHookOptions
) => useQuery(gql(getUser), options);
export const useGetUserLazyQuery = (
options?: LazyQueryHookOptions
) => useLazyQuery(gql(getUser), options);
```
```typescript
export const useCreateUserMutation = (
options?: MutationHookOptions
) => useMutation(gql(createUser), options);
```
```typescript
export const useOnCreateUserSubscription = (
options?: SubscriptionHookOptions
) => useSubscription(gql(onCreateUser), options);
```
The generated hooks are utilizing the following Apollo hooks
```
queries: { useQuery, useLazyQuery} from "@apollo/client"
mutations: { useMutation } from "@apollo/client"
subscriptions: { useSubscription } from "@apollo/client"
```
## Setup
Install the plugin globally and add it to Amplify cli
```sh
yarn global add amplify-graphql-apollo-hooks-generator
amplify plugin add amplify-graphql-apollo-hooks-generator
```
Add `apolloHooksPath` to `.graphqlconfig.yml` of your Amplify project
```yml
projects:
chat:
schemaPath: amplify/backend/api/chat/build/schema.graphql
includes:
- src/graphql/statements/*.ts
excludes:
- amplify/**
extensions:
amplify:
maxDepth: 2
codeGenTarget: typescript
generatedFileName: src/@types/graphql.ts
docsFilePath: src/graphql/statements
apolloHooksPath: src/graphql/hooks
extensions:
amplify:
version: 3
```
Add `@apollo/client` and `graphql-tag` as dependencies in your project, as the generated hooks utilize those
```sh
yarn add @apollo/client graphql-tag
```
## Usage
After pushing the API and generating the GraphQL statements and types - run `amplify apollo-hooks generate` to generate the React Apollo hooks
```sh
amplify push api
amplify codegen
amplify apollo-hooks generate
```
Check out your `apolloHooksPath` for the results