1.2.18 • Published 9 months ago

@amazeelabs/gatsby-fragments v1.2.18

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

Gatsby fragments

Generates *.fragment.ts files from *.gql files to use a vendor prefix.

This is necessary to execute equivalent GraphQL queries on the backend (Drupal) and the frontend (Gatsby) for use cases like instant preview.

Execute one time

npx @amazeelabs/gatsby-fragments generate --path "path/to/fragment-files"

Setup on a project

  1. Decide which fragments should be used by both backend and frontend (typically: content types, media, ...)
  2. Move these fragments in a dedicated directory, e.g. src/fragments/commons
  3. Convert possibly existing Gatsby GraphQL Drupal .ts fragment files to vendor agnostic .gql files
  4. Gitignore the generated *.fragment.ts files from this common directory
  5. Setup the generate fragments script in Gatsby package.json. Example: "generate-fragments": "node gatsby-fragments generate --path './src/fragments/commons' && eslint \"./src/fragments/commons/**/*.fragment.ts\" --fix && prettier --write \"./src/fragments/commons/**/*.fragment.ts\"",
  6. This script could be added to the codegen one, but it needs to be executed first, so generated fragments can then be used by codegen. Example: "codegen": "pnpm generate-fragments && graphql-codegen --config codegen.yml"
  7. Fragments in the common directory can now be executed by both Gatsby and Drupal GraphQL

Step 3. example:

Sample existing Drupal Gatsby specific fragment

import { graphql } from 'gatsby';

export const fragment = graphql`
  fragment ContentPage on DrupalContentPage {
    __typename
    drupalId
    langcode
    title
    articleReference {
      ... on DrupalContentArticle {
        drupalId
        langcode
        title
      }
    }
  }
`;

Becomes GraphQL vendor agnostic

fragment ContentPage on ContentPage {
  __typename
  drupalId
  langcode
  title
  articleReference {
    ... on ContentArticle {
      drupalId
      langcode
      title
    }
  }
}

After generate, the initial file will be set back to the original version with __typename replaced by __typename:_original_typename.

Development

To manually test on sample fragments.

pnpm ./cli.cjs generate --path ./tests/fragments
1.2.18

9 months ago

1.2.16

1 year ago

1.2.17

1 year ago

1.2.15

1 year ago

1.2.14

1 year ago

1.2.13

1 year ago

1.2.12

1 year ago

1.2.11

1 year ago

1.2.10

2 years ago

1.2.9

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.0

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.38

2 years ago

1.1.37

2 years ago

1.1.36

2 years ago

1.1.34

2 years ago

1.1.35

2 years ago

1.1.29

2 years ago

1.1.28

2 years ago

1.1.30

2 years ago

1.1.33

2 years ago

1.1.32

2 years ago

1.1.31

2 years ago

1.1.27

2 years ago

1.1.26

2 years ago

1.1.25

2 years ago

1.1.24

2 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.23

2 years ago

1.1.22

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.1.17

3 years ago

1.1.9

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago