Generate GraphQL fragments and statements (query, mutations and subscriptions) for the provided introspection schema
Generate GraphQL fragments and statements(query, mutations and subscriptions) for the provided introspection schema.
This plugin is based on [email protected]
with some parts loosely copied and updated. This strategy was chosen as there is no easy way to extend amplify-graphql-docs-generator
with custom functionality.
Install the plugin globally and add it to Amplify cli
yarn global add amplify-graphql-fragments-generator
amplify plugin add amplify-graphql-fragments-generator
Add fragments
to .graphqlconfig.yml
of your Amplify project
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
fragments:
- User
- Message
extensions:
amplify:
version: 3
After pushing the API - run amplify codegen-with-fragments generate
amplify push api
amplify codegen-with-fragments generate
amplify codegen types
Check out your docsFilePath
for the results
If we have the following schema.graphql
type Location {
lat: Float!
lon: Float!
}
type Language {
name: String!
location: Location!
}
type User {
language: Language!
}
type Users {
items: [User]
nextToken: String
}
type Message {
location: Location!
user: User!
language: Language!
}
type Query {
getUsers: Users
getLanguage: Language
}
type Mutation {
foo: String
}
type Subscription {
bar: String
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
And specify ["Message", "Location", "User"]
as fragments in .graphqlconfig.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
fragments:
- Message
- Location
- User
extensions:
amplify:
version: 3
We will get the following fragments.ts
/* tslint:disable */
/* eslint-disable */
// this is an auto generated file. This will be overwritten
export const locationFragment = /* GraphQL */ `
fragment Location on Location {
lat
lon
}
`;
export const userFragment = /* GraphQL */ `
fragment User on User {
language {
name
location {
...Location
}
}
}
${locationFragment}
`;
export const messageFragment = /* GraphQL */ `
fragment Message on Message {
location {
...Location
}
user {
...User
}
language {
name
location {
...Location
}
}
}
${locationFragment}
${userFragment}
`;
And the following queries.ts
/* tslint:disable */
/* eslint-disable */
// this is an auto generated file. This will be overwritten
import { locationFragment, userFragment } from "./fragments";
export const getUsers = /* GraphQL */ `
query GetUsers {
getUsers {
items {
...User
}
nextToken
}
}
${userFragment}
`;
export const getLanguage = /* GraphQL */ `
query GetLanguage {
getLanguage {
name
location {
...Location
}
}
}
${locationFragment}
`;