From 3fa8db8acffbcaecc464b81e1266fac2fce8fdb7 Mon Sep 17 00:00:00 2001 From: Philipp Daun Date: Sun, 13 Oct 2024 11:52:20 +0200 Subject: [PATCH 1/3] Create asset placeholder type --- src/Fieldtypes/PlaceholderFieldtype.php | 12 ++++++++ src/GraphQL/AssetPlaceholderType.php | 37 +++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 src/GraphQL/AssetPlaceholderType.php diff --git a/src/Fieldtypes/PlaceholderFieldtype.php b/src/Fieldtypes/PlaceholderFieldtype.php index 24c05bb..79b1abb 100644 --- a/src/Fieldtypes/PlaceholderFieldtype.php +++ b/src/Fieldtypes/PlaceholderFieldtype.php @@ -4,10 +4,12 @@ use Daun\StatamicPlaceholders\Data\AssetPlaceholder; use Daun\StatamicPlaceholders\Facades\Placeholders; +use Daun\StatamicPlaceholders\GraphQL\AssetPlaceholderType; use Daun\StatamicPlaceholders\Jobs\GeneratePlaceholderJob; use Daun\StatamicPlaceholders\Support\PlaceholderField; use Illuminate\Support\Number; use Statamic\Assets\Asset; +use Statamic\Facades\GraphQL; use Statamic\Fields\Fieldtype; class PlaceholderFieldtype extends Fieldtype @@ -113,4 +115,14 @@ public function augment($value) return $value; } } + + public function toGqlType() + { + return GraphQL::type(AssetPlaceholderType::NAME); + } + + public function addGqlTypes() + { + GraphQL::addType(AssetPlaceholderType::class); + } } diff --git a/src/GraphQL/AssetPlaceholderType.php b/src/GraphQL/AssetPlaceholderType.php new file mode 100644 index 0000000..b9a4aa0 --- /dev/null +++ b/src/GraphQL/AssetPlaceholderType.php @@ -0,0 +1,37 @@ + self::NAME, + ]; + + public function fields(): array + { + return [ + 'type' => [ + 'type' => GraphQL::string(), + 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('type'), + ], + 'hash' => [ + 'type' => GraphQL::string(), + 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('hash'), + ], + 'uri' => [ + 'type' => GraphQL::string(), + 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('uri'), + ], + 'exists' => [ + 'type' => GraphQL::boolean(), + 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('exists'), + ], + ]; + } +} From 7ea529f246ecbf262f1a905f2d727f0a10a912c2 Mon Sep 17 00:00:00 2001 From: Philipp Daun Date: Sun, 13 Oct 2024 12:01:04 +0200 Subject: [PATCH 2/3] Use correct field data type --- src/GraphQL/AssetPlaceholderType.php | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/GraphQL/AssetPlaceholderType.php b/src/GraphQL/AssetPlaceholderType.php index b9a4aa0..e23d006 100644 --- a/src/GraphQL/AssetPlaceholderType.php +++ b/src/GraphQL/AssetPlaceholderType.php @@ -2,7 +2,7 @@ namespace Daun\StatamicPlaceholders\GraphQL; -use Daun\StatamicPlaceholders\Fieldtypes\PlaceholderFieldtype; +use Daun\StatamicPlaceholders\Data\AssetPlaceholder; use Statamic\Facades\GraphQL; class AssetPlaceholderType extends \Rebing\GraphQL\Support\Type @@ -18,19 +18,15 @@ public function fields(): array return [ 'type' => [ 'type' => GraphQL::string(), - 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('type'), + 'resolve' => fn (AssetPlaceholder $item) => $item->augmentedValue('type'), ], 'hash' => [ 'type' => GraphQL::string(), - 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('hash'), + 'resolve' => fn (AssetPlaceholder $item) => $item->augmentedValue('hash'), ], 'uri' => [ 'type' => GraphQL::string(), - 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('uri'), - ], - 'exists' => [ - 'type' => GraphQL::boolean(), - 'resolve' => fn (PlaceholderFieldtype $field) => $field->augment('exists'), + 'resolve' => fn (AssetPlaceholder $item) => $item->augmentedValue('uri'), ], ]; } From 291e8860924f85f7ecd94875f9c0ab45618609a1 Mon Sep 17 00:00:00 2001 From: Philipp Daun Date: Sun, 13 Oct 2024 12:17:45 +0200 Subject: [PATCH 3/3] Add documentation about graphql types --- DOCUMENTATION.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index da0b876..531bdeb 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -207,6 +207,41 @@ Inside an Antlers template, you can use the `placeholder:*` tags with urls as we {{ placeholder:uri url="https://i.vimeocdn.com/video/158115405_640.jpg" }} ``` +## GraphQL + +Placeholder fields can be queried via GraphQL. Each field provides three subfields for the `type` of +placeholder, the placeholder `hash` and the ready-to-use image data `uri`. + +You can query the data uri directly to insert into each image src attribute, adding around 1-2KB of +payload for each image. That's fine in most cases, but when you're dealing with hundreds of images +you might want to only fetch the much smaller placeholder `hash` and generate the image data uri on +the frontend to save on bandwith. You'll need to integrate the official npm packages +[thumbhash](https://www.npmjs.com/package/thumbhash) or [blurhash](https://www.npmjs.com/package/blurhash) +yourself in that case. + +### Query placeholder data uri + +```graphql +... on Asset_Assets { + alt + lqip { + uri + } +} +``` + +### Query placeholder hash + +```graphql +... on Asset_Assets { + alt + lqip { + type + hash + } +} +``` + ## Queueing If your site is configured to use queues, the placeholders will also be generated asynchronously