Skip to content

Commit

Permalink
Merge pull request #175 from wunderio/feature/nex-15-graphql
Browse files Browse the repository at this point in the history
NEX-15: switch from jsonapi to graphql
  • Loading branch information
vermario authored Feb 9, 2024
2 parents cc1b206 + 682dedd commit 831fb53
Show file tree
Hide file tree
Showing 93 changed files with 6,996 additions and 1,614 deletions.
21 changes: 21 additions & 0 deletions Changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).


## [2.0.0]

This release is a major update. Instead of using JSONAPI, the starterkit now uses GraphQL to fetch data from Drupal.
All features are kept but have been re-implemented to use the new way of handling data coming from the backend.

### Added

- GraphQL Drupal modules and related configuration
- `graphql-request` for fetching data from Drupal
- `graphql-codegen` for generating types from GraphQL schema, queries and fragments

### Removed
- JSONAPI modules and related configuration
- Manual definitions in `zod` for JSONAPI responses

### Changed
- Reorganization of the components directory structure
- Updated Readme with new instructions regarding GraphQL setup


## [1.0.0] - 09.02.2024

The starterkit provides a basic setup for a new project using next-drupal to build a decoupled Drupal frontend with Next.js.
Expand Down
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,14 @@ The frontend uses [TypeScript](https://www.typescriptlang.org) to provide type s

TypeScript is setup quite loosely by default to minimise friction and make it accessible to developers who are not familiar with it. It is recommended to increase type safety by enabling some of the disabled rules in `next/eslint.json`.

#### Data fetching with TypeScript and Zod
#### Working with GraphQL and TypeScript

[Zod](https://zod.dev) is also used on the frontend to type the data fetched from the backend. When it's necessary to change what data is fetched from the backend, check the following files:
The project uses GraphQL to fetch data from the backend. The queries are defined in the `next/lib/graphql/queries` directory. The queries are typed using the `graphql-codegen` package, which generates TypeScript types from the queries. The types are then used to type the data fetched from the backend.

- `next/lib/get-node-page-json-api-params.ts` - this file creates the parameters that are passed to JSON API when fetching page data.
- `next/lib/zod/*.ts` - these files contain the Zod schemas that are used to validate and cleanup the data fetched from the backend. Any data that is not accounted for in these schemas will be removed, in order to prevent sending more data than necessary to the client. During development, it can be handy to avoid this behaviour using [zod.passthrough()](https://zod.dev/?id=passthrough) to pass ALL data to the client, and then tighten the schema later to only pass the data that is actually needed.
When adding or modifying queries and fragments, you will need to run `lando npm run graphql-codegen` to generate the corresponding types. The command will keep checking the files for changes.

When there are changes on the GraphQL server schema itself, you need to stop and start the command again to fetch the new schema definition. Also, you might need to `lando drush cr` to clear the Drupal cache.
§
#### Typesafe environment variables

The environment variables used by the frontend are also checked for type safety. If used correctly, a Zod error will prevent the frontend from building if the environment variables are not set according to the schema defined in `next/env.ts`. To add a new environment variable:
Expand Down
22 changes: 12 additions & 10 deletions drupal/composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
"drupal/core-composer-scaffold": "^10.0",
"drupal/core-recommended": "^10.0",
"drupal/elasticsearch_helper": "^8.1",
"drupal/jsonapi_extras": "^3.24",
"drupal/jsonapi_menu_items": "^1.2",
"drupal/graphql_compose": "^2.0",
"drupal/menu_link_attributes": "^1.3",
"drupal/metatag": "^2.0",
"drupal/migrate_plus": "^6.0",
Expand Down Expand Up @@ -128,21 +127,24 @@
"composer-exit-on-patch-failure": true,
"patches": {
"drupal/subrequests": {
"Get same results on different request": "https://www.drupal.org/files/issues/2019-07-18/change_request_type-63049395-09.patch"
"#3049395-47 - Page Cache causes different subrequests to return the same responses": "https://www.drupal.org/files/issues/2022-12-06/subrequests-3049395-chnage-request-type-47.patch"
},
"drupal/decoupled_router": {
"Unable to resolve path on node in other language than default": "https://www.drupal.org/files/issues/2023-04-27/decouple_router-3111456-resolve-language-issue-64--get-translation.patch"
"#3111456-59 - Unable to resolve path on node in other language than default": "https://www.drupal.org/files/issues/2022-12-01/decouple_router-3111456-resolve-language-issue-58--get-translation.patch"
},
"drupal/jsonapi_menu_items": {
"Add info about the langcode for menu items (issue #3192576)": "https://www.drupal.org/files/issues/2023-02-10/3192576-18.patch"
"drupal/paragraphs": {
"Paragraphs (stable) title from form options not being applied (issue #3401581)": "https://www.drupal.org/files/issues/2023-11-14/paragraphs-custom-title-not-displayed-3401581-2.patch"
},
"drupal/graphql" : {
"drupal-graphql#1323: Add check for translation (from Github)": "https://patch-diff.githubusercontent.com/raw/drupal-graphql/graphql/pull/1388.patch"
},
"drupal/graphql_compose" : {
"Add the langcode field to the menu_item entity in graphql (local patch)": "./patches/grapqhl_compose_add_langcode_to_menu_item.patch"
},
"drupal/core": {
"Add support for the experimental recipes functionality": "https://git.drupalcode.org/project/distributions_recipes/-/raw/patch/recipe.patch",
"Fix error when enabling the language module via recipe": "https://www.drupal.org/files/issues/2019-11-19/drupal.8.8.x-3002532-20.patch",
"Set MenuLinkContent getEntity to public visibility": "https://www.drupal.org/files/issues/2022-05-16/2997790-40.patch",
"Add link fields to jsonapi response": "https://www.drupal.org/files/issues/2022-03-04/3066751-68.patch",
"Do not set user as blocked when created via REST": "https://www.drupal.org/files/issues/2022-08-17/3055807-47.patch",
"Return correct revisions of paragraphs in preview json api response": "https://www.drupal.org/files/issues/2022-09-27/3088239-33.patch"
"Do not set user as blocked when created via REST": "https://www.drupal.org/files/issues/2022-08-17/3055807-47.patch"
}
},
"dropin-paths": {
Expand Down
Loading

0 comments on commit 831fb53

Please sign in to comment.