@okam/directus-block 1.6.2 → 1.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/README.md +7 -1
- package/blocks/BlockWysiwyg/config.js +1 -1
- package/blocks/BlockWysiwyg/config.mjs +1 -1
- package/blocks/BlockWysiwyg/index.js +5 -3
- package/blocks/BlockWysiwyg/index.mjs +5 -3
- package/blocks/BlockWysiwyg/interface.d.ts +1 -1
- package/components/BlockDispatcher/index.js +2 -1
- package/components/BlockDispatcher/index.mjs +2 -1
- package/components/BlockSerializer/index.js +1 -0
- package/components/BlockSerializer/index.mjs +1 -0
- package/index.d.ts +1 -1
- package/index.js +10 -2
- package/index.mjs +14 -6
- package/package.json +2 -2
- package/server.d.ts +1 -3
- package/server.js +8 -4
- package/server.mjs +9 -5
- package/{hooks/useBlock.d.ts → utils/getBlock.d.ts} +15 -3
- package/utils/getBlock.js +29 -0
- package/utils/getBlock.mjs +29 -0
- package/utils/{get-block-props.d.ts → getBlockProps.d.ts} +2 -1
- package/utils/{get-block-props.js → getBlockProps.js} +4 -4
- package/utils/{get-block-props.mjs → getBlockProps.mjs} +5 -5
- package/utils/index.d.ts +8 -2
- package/utils/index.js +8 -0
- package/utils/index.mjs +8 -0
- package/hooks/useBlock.js +0 -19
- package/hooks/useBlock.mjs +0 -20
- /package/utils/{merge-configs.d.ts → mergeConfigs.d.ts} +0 -0
- /package/utils/{merge-configs.js → mergeConfigs.js} +0 -0
- /package/utils/{merge-configs.mjs → mergeConfigs.mjs} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,26 @@
|
|
|
1
|
+
## 1.6.3 (2026-01-14)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- ⚠️ React 19 + Next.js 15 upgrade for all @okam/* packages ([#369](https://github.com/OKAMca/stack/pull/369))
|
|
6
|
+
|
|
7
|
+
### 🩹 Fixes
|
|
8
|
+
|
|
9
|
+
- ⚠️ functions starting with "use" should be reserved to react hooks ([68f1f8f](https://github.com/OKAMca/stack/commit/68f1f8f))
|
|
10
|
+
|
|
11
|
+
### ⚠️ Breaking Changes
|
|
12
|
+
|
|
13
|
+
- Consumers must now have react and react-dom in their own
|
|
14
|
+
|
|
15
|
+
### 🧱 Updated Dependencies
|
|
16
|
+
|
|
17
|
+
- Updated stack-ui to 1.44.0
|
|
18
|
+
|
|
19
|
+
### ❤️ Thank You
|
|
20
|
+
|
|
21
|
+
- Marie-Maxime Tanguay @marie-maxime
|
|
22
|
+
- Pierre-Olivier Clerson @poclerson
|
|
23
|
+
|
|
1
24
|
## 1.6.2 (2026-01-13)
|
|
2
25
|
|
|
3
26
|
### 🚀 Features
|
package/README.md
CHANGED
|
@@ -41,6 +41,12 @@ This component calls the good component in the configuration from the `collectio
|
|
|
41
41
|
- variables: The block's variables. Passing the id is necessary
|
|
42
42
|
- document: Can also be passed in the config. The document that will be used to make a query
|
|
43
43
|
|
|
44
|
+
#### `useBlock` function
|
|
45
|
+
|
|
46
|
+
The `useBlock` function is a hook that automatically determines wether a block should use `props.item` (passed props) or `props.variables` (makes its own query).
|
|
47
|
+
|
|
48
|
+
If `props.item` only contains `id` and `settings`, the item will be determined to be empty, and the block will still make the query using `props.variables`.
|
|
49
|
+
|
|
44
50
|
## Configuration
|
|
45
51
|
|
|
46
52
|
A configuration uses the `components` prop to map a key value, like so:
|
|
@@ -164,4 +170,4 @@ const brandConfigWithStackBlocks = {
|
|
|
164
170
|
...blockHeroConfig,
|
|
165
171
|
}
|
|
166
172
|
}
|
|
167
|
-
```
|
|
173
|
+
```
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
const stackUi = require("@okam/stack-ui");
|
|
4
4
|
const React = require("react");
|
|
5
|
-
const
|
|
5
|
+
const getBlock = require("../../utils/getBlock.js");
|
|
6
|
+
require("@okam/directus-query");
|
|
7
|
+
require("radashi");
|
|
6
8
|
const BlockWysiwyg = async (props) => {
|
|
7
|
-
const key = "
|
|
9
|
+
const key = "block_wysiwygs_by_id";
|
|
8
10
|
const { themeName = "wysiwyg", tokens } = props;
|
|
9
|
-
const { content, title, level, cmsTokens } = await
|
|
11
|
+
const { content, title, level, cmsTokens } = await getBlock.getBlock(props, key);
|
|
10
12
|
if (!content && !(title && level)) return null;
|
|
11
13
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12
14
|
title && level && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Box, WysiwygBlock } from "@okam/stack-ui";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import
|
|
4
|
+
import { getBlock } from "../../utils/getBlock.mjs";
|
|
5
|
+
import "@okam/directus-query";
|
|
6
|
+
import "radashi";
|
|
5
7
|
const BlockWysiwyg = async (props) => {
|
|
6
|
-
const key = "
|
|
8
|
+
const key = "block_wysiwygs_by_id";
|
|
7
9
|
const { themeName = "wysiwyg", tokens } = props;
|
|
8
|
-
const { content, title, level, cmsTokens } = await
|
|
10
|
+
const { content, title, level, cmsTokens } = await getBlock(props, key);
|
|
9
11
|
if (!content && !(title && level)) return null;
|
|
10
12
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11
13
|
title && level && /* @__PURE__ */ jsx(Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
require("@okam/directus-query");
|
|
4
|
+
require("graphql-request");
|
|
4
5
|
require("radashi");
|
|
5
|
-
const mergeConfigs = require("../../utils/
|
|
6
|
+
const mergeConfigs = require("../../utils/mergeConfigs.js");
|
|
6
7
|
const index = require("../BlockSerializer/index.js");
|
|
7
8
|
const config = require("./config.js");
|
|
8
9
|
const BlockDispatcher = (props) => {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "@okam/directus-query";
|
|
3
|
+
import "graphql-request";
|
|
3
4
|
import "radashi";
|
|
4
|
-
import mergeConfigs from "../../utils/
|
|
5
|
+
import mergeConfigs from "../../utils/mergeConfigs.mjs";
|
|
5
6
|
import BlockSerializer from "../BlockSerializer/index.mjs";
|
|
6
7
|
import baseConfig from "./config.mjs";
|
|
7
8
|
const BlockDispatcher = (props) => {
|
|
@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
3
3
|
const graphql = require("../../generated/graphql.js");
|
|
4
4
|
const fragmentMasking = require("../../generated/fragment-masking.js");
|
|
5
5
|
require("@okam/directus-query");
|
|
6
|
+
require("graphql-request");
|
|
6
7
|
require("radashi");
|
|
7
8
|
const BlockSerializer = (props) => {
|
|
8
9
|
var _a, _b, _c;
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { BlockSettingsFragmentDoc } from "../../generated/graphql.mjs";
|
|
3
3
|
import { useFragment } from "../../generated/fragment-masking.mjs";
|
|
4
4
|
import "@okam/directus-query";
|
|
5
|
+
import "graphql-request";
|
|
5
6
|
import "radashi";
|
|
6
7
|
const BlockSerializer = (props) => {
|
|
7
8
|
var _a, _b, _c;
|
package/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
export * from './utils';
|
|
1
2
|
export type { BlockSettingsFragment } from './generated/graphql';
|
|
2
3
|
export type { TBlockDispatcherProps } from './components/BlockDispatcher/interface';
|
|
3
4
|
export type { TBlockSerializerConfig, TBlockSerializerProps, TBlock, TBlockSerializerConfigComponent, } from './components/BlockSerializer/interface';
|
|
4
5
|
export type { TAdditionalProps, TCommonBlockFragment, TBlockQuery, TBlockDocument, TBlockVariables, } from './types/block';
|
|
5
6
|
export { default as BlockWysiwyg } from './blocks/BlockWysiwyg';
|
|
6
|
-
export { default as useBlock } from './hooks/useBlock';
|
|
7
7
|
export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config';
|
|
8
8
|
export { default as baseConfig } from './components/BlockDispatcher/config';
|
package/index.js
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const index$1 = require("./utils/index.js");
|
|
3
4
|
const index = require("./blocks/BlockWysiwyg/index.js");
|
|
4
|
-
const useBlock = require("./hooks/useBlock.js");
|
|
5
5
|
const config = require("./blocks/BlockWysiwyg/config.js");
|
|
6
6
|
const config$1 = require("./components/BlockDispatcher/config.js");
|
|
7
|
+
const getBlockProps = require("./utils/getBlockProps.js");
|
|
8
|
+
const mergeConfigs = require("./utils/mergeConfigs.js");
|
|
9
|
+
const fragmentMasking = require("./generated/fragment-masking.js");
|
|
10
|
+
const getBlock = require("./utils/getBlock.js");
|
|
11
|
+
exports.useBlock = index$1.useBlock;
|
|
7
12
|
exports.BlockWysiwyg = index;
|
|
8
|
-
exports.useBlock = useBlock;
|
|
9
13
|
exports.blockWysiwygConfig = config;
|
|
10
14
|
exports.baseConfig = config$1;
|
|
15
|
+
exports.getBlockProps = getBlockProps;
|
|
16
|
+
exports.mergeConfigs = mergeConfigs;
|
|
17
|
+
exports.getFragment = fragmentMasking.useFragment;
|
|
18
|
+
exports.getBlock = getBlock.getBlock;
|
package/index.mjs
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
|
+
import { useBlock } from "./utils/index.mjs";
|
|
1
2
|
import { default as default2 } from "./blocks/BlockWysiwyg/index.mjs";
|
|
2
|
-
import { default as default3 } from "./
|
|
3
|
-
import { default as default4 } from "./
|
|
4
|
-
import { default as default5 } from "./
|
|
3
|
+
import { default as default3 } from "./blocks/BlockWysiwyg/config.mjs";
|
|
4
|
+
import { default as default4 } from "./components/BlockDispatcher/config.mjs";
|
|
5
|
+
import { default as default5 } from "./utils/getBlockProps.mjs";
|
|
6
|
+
import { default as default6 } from "./utils/mergeConfigs.mjs";
|
|
7
|
+
import { useFragment } from "./generated/fragment-masking.mjs";
|
|
8
|
+
import { getBlock } from "./utils/getBlock.mjs";
|
|
5
9
|
export {
|
|
6
10
|
default2 as BlockWysiwyg,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
11
|
+
default4 as baseConfig,
|
|
12
|
+
default3 as blockWysiwygConfig,
|
|
13
|
+
getBlock,
|
|
14
|
+
default5 as getBlockProps,
|
|
15
|
+
useFragment as getFragment,
|
|
16
|
+
default6 as mergeConfigs,
|
|
17
|
+
useBlock
|
|
10
18
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@okam/directus-block",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.3",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@graphql-typed-document-node/core": "3.2.0",
|
|
36
36
|
"@okam/directus-query": "1.4.2",
|
|
37
|
-
"@okam/stack-ui": "1.
|
|
37
|
+
"@okam/stack-ui": "1.44.0",
|
|
38
38
|
"graphql": "^16.9.0",
|
|
39
39
|
"graphql-request": "^7.1.2",
|
|
40
40
|
"radashi": "^12.3.0"
|
package/server.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
export { default as BlockDispatcher } from './components/BlockDispatcher';
|
|
2
2
|
export { default as BlockSerializer } from './components/BlockSerializer';
|
|
3
|
-
export
|
|
4
|
-
export { default as useBlock } from './hooks/useBlock';
|
|
5
|
-
export { default as mergeConfigs } from './utils/merge-configs';
|
|
3
|
+
export * from './utils';
|
package/server.js
CHANGED
|
@@ -3,11 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const index = require("./components/BlockDispatcher/index.js");
|
|
5
5
|
const index$1 = require("./components/BlockSerializer/index.js");
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const mergeConfigs = require("./utils/
|
|
6
|
+
const index$2 = require("./utils/index.js");
|
|
7
|
+
const getBlockProps = require("./utils/getBlockProps.js");
|
|
8
|
+
const mergeConfigs = require("./utils/mergeConfigs.js");
|
|
9
|
+
const fragmentMasking = require("./generated/fragment-masking.js");
|
|
10
|
+
const getBlock = require("./utils/getBlock.js");
|
|
9
11
|
exports.BlockDispatcher = index;
|
|
10
12
|
exports.BlockSerializer = index$1;
|
|
13
|
+
exports.useBlock = index$2.useBlock;
|
|
11
14
|
exports.getBlockProps = getBlockProps;
|
|
12
|
-
exports.useBlock = useBlock;
|
|
13
15
|
exports.mergeConfigs = mergeConfigs;
|
|
16
|
+
exports.getFragment = fragmentMasking.useFragment;
|
|
17
|
+
exports.getBlock = getBlock.getBlock;
|
package/server.mjs
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
"server-only";
|
|
2
2
|
import { default as default2 } from "./components/BlockDispatcher/index.mjs";
|
|
3
3
|
import { default as default3 } from "./components/BlockSerializer/index.mjs";
|
|
4
|
-
import {
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
4
|
+
import { useBlock } from "./utils/index.mjs";
|
|
5
|
+
import { default as default4 } from "./utils/getBlockProps.mjs";
|
|
6
|
+
import { default as default5 } from "./utils/mergeConfigs.mjs";
|
|
7
|
+
import { useFragment } from "./generated/fragment-masking.mjs";
|
|
8
|
+
import { getBlock } from "./utils/getBlock.mjs";
|
|
7
9
|
export {
|
|
8
10
|
default2 as BlockDispatcher,
|
|
9
11
|
default3 as BlockSerializer,
|
|
12
|
+
getBlock,
|
|
10
13
|
default4 as getBlockProps,
|
|
11
|
-
|
|
12
|
-
default5 as
|
|
14
|
+
useFragment as getFragment,
|
|
15
|
+
default5 as mergeConfigs,
|
|
16
|
+
useBlock
|
|
13
17
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TToken } from '../../../../stack/stack-ui/src/index.ts';
|
|
2
|
+
import { GraphQLClient } from 'graphql-request';
|
|
2
3
|
import { TBlockSerializerProps } from '../components/BlockSerializer/interface';
|
|
3
4
|
import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/block';
|
|
4
5
|
|
|
@@ -6,7 +7,7 @@ import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/
|
|
|
6
7
|
* General function to fetch the block data and its settings. Features the decision-making logic of {@link getBlockProps} that allows blocks to work with both passed props and queried props.
|
|
7
8
|
* @param props Props of the block component. Pass props directly from the block component.
|
|
8
9
|
* @param blockKey Key of the block data in the GraphQL document. Allows mapping props regardless of the block's collection name. Usually the block's collection name with `_by_id` appended since most queries are made by id.
|
|
9
|
-
* @param
|
|
10
|
+
* @param docOrClient Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`. **Deprecated**: can also be a fallback for `props.document`.
|
|
10
11
|
* @returns The block data and its settings.
|
|
11
12
|
*
|
|
12
13
|
* @example
|
|
@@ -14,11 +15,22 @@ import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/
|
|
|
14
15
|
* const BlockButtons = (props: TBlockSerializerProps<BlockButtonsFragment>) => {
|
|
15
16
|
* const key = 'block_buttons_by_id'
|
|
16
17
|
* const { tokens } = props
|
|
17
|
-
* const { link, cmsTokens, variant } = await
|
|
18
|
+
* const { link, cmsTokens, variant } = await getBlock(props, key)
|
|
18
19
|
* return <Link {...link} tokens={{ ...tokens, ...cmsTokens, style: variant }} />
|
|
19
20
|
* }
|
|
20
21
|
* ```
|
|
21
22
|
*/
|
|
22
|
-
export
|
|
23
|
+
export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string,
|
|
24
|
+
/**
|
|
25
|
+
* @default defaultGraphqlRequestClient
|
|
26
|
+
*/
|
|
27
|
+
client?: GraphQLClient): Promise<Fragment & {
|
|
28
|
+
cmsTokens: TToken;
|
|
29
|
+
}>;
|
|
30
|
+
export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string,
|
|
31
|
+
/**
|
|
32
|
+
* @deprecated Use props.document instead
|
|
33
|
+
*/
|
|
34
|
+
doc?: TBlockDocument<Fragment, Variables>): Promise<Fragment & {
|
|
23
35
|
cmsTokens: TToken;
|
|
24
36
|
}>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const directusQuery = require("@okam/directus-query");
|
|
4
|
+
const graphqlRequest = require("graphql-request");
|
|
5
|
+
const radashi = require("radashi");
|
|
6
|
+
const fragmentMasking = require("../generated/fragment-masking.js");
|
|
7
|
+
const graphql = require("../generated/graphql.js");
|
|
8
|
+
const getBlockProps = require("./getBlockProps.js");
|
|
9
|
+
function isClient(docOrClient) {
|
|
10
|
+
return docOrClient instanceof graphqlRequest.GraphQLClient;
|
|
11
|
+
}
|
|
12
|
+
async function getBlock(props, blockKey, docOrClient = directusQuery.defaultGraphqlRequestClient) {
|
|
13
|
+
const item = radashi.get(props, "item");
|
|
14
|
+
const isPropClient = isClient(docOrClient);
|
|
15
|
+
const document = radashi.get(props, "document");
|
|
16
|
+
const variables = radashi.get(props, "variables");
|
|
17
|
+
const propsWithFallback = await getBlockProps(
|
|
18
|
+
{
|
|
19
|
+
item,
|
|
20
|
+
blockKey,
|
|
21
|
+
document: document ?? (!isPropClient ? docOrClient : void 0),
|
|
22
|
+
variables
|
|
23
|
+
},
|
|
24
|
+
isPropClient ? docOrClient : void 0
|
|
25
|
+
);
|
|
26
|
+
const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
|
|
27
|
+
return { ...propsWithFallback, cmsTokens: tokens };
|
|
28
|
+
}
|
|
29
|
+
exports.getBlock = getBlock;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { defaultGraphqlRequestClient } from "@okam/directus-query";
|
|
2
|
+
import { GraphQLClient } from "graphql-request";
|
|
3
|
+
import { get } from "radashi";
|
|
4
|
+
import { useFragment } from "../generated/fragment-masking.mjs";
|
|
5
|
+
import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
|
|
6
|
+
import getBlockProps from "./getBlockProps.mjs";
|
|
7
|
+
function isClient(docOrClient) {
|
|
8
|
+
return docOrClient instanceof GraphQLClient;
|
|
9
|
+
}
|
|
10
|
+
async function getBlock(props, blockKey, docOrClient = defaultGraphqlRequestClient) {
|
|
11
|
+
const item = get(props, "item");
|
|
12
|
+
const isPropClient = isClient(docOrClient);
|
|
13
|
+
const document = get(props, "document");
|
|
14
|
+
const variables = get(props, "variables");
|
|
15
|
+
const propsWithFallback = await getBlockProps(
|
|
16
|
+
{
|
|
17
|
+
item,
|
|
18
|
+
blockKey,
|
|
19
|
+
document: document ?? (!isPropClient ? docOrClient : void 0),
|
|
20
|
+
variables
|
|
21
|
+
},
|
|
22
|
+
isPropClient ? docOrClient : void 0
|
|
23
|
+
);
|
|
24
|
+
const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
|
|
25
|
+
return { ...propsWithFallback, cmsTokens: tokens };
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
getBlock
|
|
29
|
+
};
|
|
@@ -12,7 +12,8 @@ type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVaria
|
|
|
12
12
|
* Returns the passed item if it is defined. Otherwise, queried its own block
|
|
13
13
|
* @param params.blockKey Key of the queried field
|
|
14
14
|
* @param params.item Item of the block. If null or only contains the block's id, the function will make a query
|
|
15
|
+
* @param client Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`.
|
|
15
16
|
* @returns The block data
|
|
16
17
|
*/
|
|
17
|
-
export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables
|
|
18
|
+
export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>, client?: import('graphql-request').GraphQLClient): Promise<BlockFragment | null | undefined>;
|
|
18
19
|
export {};
|
|
@@ -9,15 +9,15 @@ function isItemEmpty(item) {
|
|
|
9
9
|
const { id, settings, ...restOfItem } = item ?? {};
|
|
10
10
|
return radashi.isEmpty(restOfItem);
|
|
11
11
|
}
|
|
12
|
-
async function queryFromVariables(params) {
|
|
12
|
+
async function queryFromVariables(params, client = directusQuery.defaultGraphqlRequestClient) {
|
|
13
13
|
const { document, blockKey, variables } = params;
|
|
14
14
|
if (!document || !isVariables(variables)) return null;
|
|
15
|
-
const queriedBlockProps = await directusQuery.queryGql(document, variables);
|
|
15
|
+
const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
|
|
16
16
|
if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
|
|
17
17
|
const queriedBlockFragment = queriedBlockProps[blockKey];
|
|
18
18
|
return queriedBlockFragment;
|
|
19
19
|
}
|
|
20
|
-
async function getBlockProps(params) {
|
|
20
|
+
async function getBlockProps(params, client = directusQuery.defaultGraphqlRequestClient) {
|
|
21
21
|
const { document, item, blockKey, variables } = params;
|
|
22
22
|
if (item) {
|
|
23
23
|
if (!isItemEmpty(item)) {
|
|
@@ -31,7 +31,7 @@ async function getBlockProps(params) {
|
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
if (!document || !isVariables(variables)) return null;
|
|
34
|
-
const queriedBlockProps = await directusQuery.queryGql(document, variables);
|
|
34
|
+
const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
|
|
35
35
|
if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
|
|
36
36
|
const queriedBlockFragment = queriedBlockProps[blockKey];
|
|
37
37
|
return queriedBlockFragment;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"server-only";
|
|
2
|
-
import { queryGql } from "@okam/directus-query";
|
|
2
|
+
import { queryGql, defaultGraphqlRequestClient } from "@okam/directus-query";
|
|
3
3
|
import { isEmpty } from "radashi";
|
|
4
4
|
function isVariables(maybeVariables) {
|
|
5
5
|
return !!maybeVariables;
|
|
@@ -8,15 +8,15 @@ function isItemEmpty(item) {
|
|
|
8
8
|
const { id, settings, ...restOfItem } = item ?? {};
|
|
9
9
|
return isEmpty(restOfItem);
|
|
10
10
|
}
|
|
11
|
-
async function queryFromVariables(params) {
|
|
11
|
+
async function queryFromVariables(params, client = defaultGraphqlRequestClient) {
|
|
12
12
|
const { document, blockKey, variables } = params;
|
|
13
13
|
if (!document || !isVariables(variables)) return null;
|
|
14
|
-
const queriedBlockProps = await queryGql(document, variables);
|
|
14
|
+
const queriedBlockProps = await queryGql(document, variables, client);
|
|
15
15
|
if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
|
|
16
16
|
const queriedBlockFragment = queriedBlockProps[blockKey];
|
|
17
17
|
return queriedBlockFragment;
|
|
18
18
|
}
|
|
19
|
-
async function getBlockProps(params) {
|
|
19
|
+
async function getBlockProps(params, client = defaultGraphqlRequestClient) {
|
|
20
20
|
const { document, item, blockKey, variables } = params;
|
|
21
21
|
if (item) {
|
|
22
22
|
if (!isItemEmpty(item)) {
|
|
@@ -30,7 +30,7 @@ async function getBlockProps(params) {
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
if (!document || !isVariables(variables)) return null;
|
|
33
|
-
const queriedBlockProps = await queryGql(document, variables);
|
|
33
|
+
const queriedBlockProps = await queryGql(document, variables, client);
|
|
34
34
|
if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
|
|
35
35
|
const queriedBlockFragment = queriedBlockProps[blockKey];
|
|
36
36
|
return queriedBlockFragment;
|
package/utils/index.d.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { useFragment } from '../generated/fragment-masking';
|
|
2
|
+
import { getBlock } from './getBlock';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `getBlock` instead
|
|
6
|
+
*/
|
|
7
|
+
export declare const useBlock: typeof getBlock;
|
|
8
|
+
export { default as getBlockProps } from './getBlockProps';
|
|
9
|
+
export { default as mergeConfigs } from './mergeConfigs';
|
|
5
10
|
export { useFragment as getFragment };
|
|
11
|
+
export { getBlock };
|
package/utils/index.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const getBlock = require("./getBlock.js");
|
|
4
|
+
require("@okam/directus-query");
|
|
5
|
+
require("radashi");
|
|
6
|
+
const useBlock = getBlock.getBlock;
|
|
7
|
+
exports.getBlock = getBlock.getBlock;
|
|
8
|
+
exports.useBlock = useBlock;
|
package/utils/index.mjs
ADDED
package/hooks/useBlock.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const radashi = require("radashi");
|
|
3
|
-
const graphql = require("../generated/graphql.js");
|
|
4
|
-
const fragmentMasking = require("../generated/fragment-masking.js");
|
|
5
|
-
const getBlockProps = require("../utils/get-block-props.js");
|
|
6
|
-
async function useBlock(props, blockKey, doc) {
|
|
7
|
-
const item = radashi.get(props, "item");
|
|
8
|
-
const document = doc ?? radashi.get(props, "document");
|
|
9
|
-
const variables = radashi.get(props, "variables");
|
|
10
|
-
const propsWithFallback = await getBlockProps({
|
|
11
|
-
item,
|
|
12
|
-
blockKey,
|
|
13
|
-
document,
|
|
14
|
-
variables
|
|
15
|
-
});
|
|
16
|
-
const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
|
|
17
|
-
return { ...propsWithFallback, cmsTokens: tokens };
|
|
18
|
-
}
|
|
19
|
-
module.exports = useBlock;
|
package/hooks/useBlock.mjs
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { get } from "radashi";
|
|
2
|
-
import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
|
|
3
|
-
import { useFragment } from "../generated/fragment-masking.mjs";
|
|
4
|
-
import getBlockProps from "../utils/get-block-props.mjs";
|
|
5
|
-
async function useBlock(props, blockKey, doc) {
|
|
6
|
-
const item = get(props, "item");
|
|
7
|
-
const document = doc ?? get(props, "document");
|
|
8
|
-
const variables = get(props, "variables");
|
|
9
|
-
const propsWithFallback = await getBlockProps({
|
|
10
|
-
item,
|
|
11
|
-
blockKey,
|
|
12
|
-
document,
|
|
13
|
-
variables
|
|
14
|
-
});
|
|
15
|
-
const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
|
|
16
|
-
return { ...propsWithFallback, cmsTokens: tokens };
|
|
17
|
-
}
|
|
18
|
-
export {
|
|
19
|
-
useBlock as default
|
|
20
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|