@okam/directus-block 1.6.2 → 1.7.1

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+## 1.7.1 (2026-01-16)
+
+### 🧱 Updated Dependencies
+
+- Updated directus-query to 1.5.0
+
+## 1.7.0 (2026-01-16)
+
+### 🚀 Features
+
+- ⚠️  React 19 + Next.js 15 upgrade for all @okam/* packages ([#369](https://github.com/OKAMca/stack/pull/369))
+- Consumers must now have react and react-dom in their own
+
+### 🩹 Fixes
+
+- **directus-block:** remove breaking changes tag ([b521c26](https://github.com/OKAMca/stack/commit/b521c26))
+- **directus-block:** stop bundling okam libs ([b0ddad5](https://github.com/OKAMca/stack/commit/b0ddad5))
+- **directus-next:** draft route handler uses zod, returns draft isEnabled whenever possible ([#376](https://github.com/OKAMca/stack/pull/376))
+- ⚠️  functions starting with "use" should be reserved to react hooks ([68f1f8f](https://github.com/OKAMca/stack/commit/68f1f8f))
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+- poclerson
+
+## 1.6.3 (2026-01-14)
+
+### 🚀 Features
+
+- ⚠️  React 19 + Next.js 15 upgrade for all @okam/* packages ([#369](https://github.com/OKAMca/stack/pull/369))
+- Consumers must now have react and react-dom in their own
+
+### 🩹 Fixes
+
+- ⚠️  functions starting with "use" should be reserved to react hooks ([68f1f8f](https://github.com/OKAMca/stack/commit/68f1f8f))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.44.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
 ## 1.6.2 (2026-01-13)
 
 ### 🚀 Features

package/README.md

@@ -41,6 +41,12 @@ This component calls the good component in the configuration from the `collectio
 - variables: The block's variables. Passing the id is necessary
 - document: Can also be passed in the config. The document that will be used to make a query
 
+#### `useBlock` function
+
+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).
+
+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`.
+
 ## Configuration
 
 A configuration uses the `components` prop to map a key value, like so:
@@ -164,4 +170,4 @@ const brandConfigWithStackBlocks = {
     ...blockHeroConfig,
   }
 }
-```
+```

package/blocks/BlockWysiwyg/config.js

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("./index.js");
 const blockWysiwygConfig = {
-  block_wysiwyg: {
+  block_wysiwygs: {
     default: (props) => /* @__PURE__ */ jsxRuntime.jsx(index, { ...props })
   }
 };

package/blocks/BlockWysiwyg/config.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import BlockWysiwyg from "./index.mjs";
 const blockWysiwygConfig = {
-  block_wysiwyg: {
+  block_wysiwygs: {
     default: (props) => /* @__PURE__ */ jsx(BlockWysiwyg, { ...props })
   }
 };

package/blocks/BlockWysiwyg/index.js

@@ -2,11 +2,13 @@
 const jsxRuntime = require("react/jsx-runtime");
 const stackUi = require("@okam/stack-ui");
 const React = require("react");
-const useBlock = require("../../hooks/useBlock.js");
+const getBlock = require("../../utils/getBlock.js");
+require("@okam/directus-query");
+require("radashi");
 const BlockWysiwyg = async (props) => {
-  const key = "block_wysiwyg_by_id";
+  const key = "block_wysiwygs_by_id";
   const { themeName = "wysiwyg", tokens } = props;
-  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  const { content, title, level, cmsTokens } = await getBlock.getBlock(props, key);
   if (!content && !(title && level)) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     title && level && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),

package/blocks/BlockWysiwyg/index.mjs

@@ -1,11 +1,13 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Box, WysiwygBlock } from "@okam/stack-ui";
 import React from "react";
-import useBlock from "../../hooks/useBlock.mjs";
+import { getBlock } from "../../utils/getBlock.mjs";
+import "@okam/directus-query";
+import "radashi";
 const BlockWysiwyg = async (props) => {
-  const key = "block_wysiwyg_by_id";
+  const key = "block_wysiwygs_by_id";
   const { themeName = "wysiwyg", tokens } = props;
-  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  const { content, title, level, cmsTokens } = await getBlock(props, key);
   if (!content && !(title && level)) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && level && /* @__PURE__ */ jsx(Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),

package/blocks/BlockWysiwyg/interface.d.ts

@@ -1,7 +1,7 @@
 import { BlockSettingsFragment } from '../../generated/graphql';
 
 export type BlockWysiwygFragment = {
-    __typename?: 'block_wysiwyg';
+    __typename?: 'block_wysiwygs';
     title?: string | null;
     content?: string | null;
     level?: string | null;

package/components/BlockDispatcher/index.js

@@ -1,8 +1,9 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 require("@okam/directus-query");
+require("graphql-request");
 require("radashi");
-const mergeConfigs = require("../../utils/merge-configs.js");
+const mergeConfigs = require("../../utils/mergeConfigs.js");
 const index = require("../BlockSerializer/index.js");
 const config = require("./config.js");
 const BlockDispatcher = (props) => {

package/components/BlockDispatcher/index.mjs

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "@okam/directus-query";
+import "graphql-request";
 import "radashi";
-import mergeConfigs from "../../utils/merge-configs.mjs";
+import mergeConfigs from "../../utils/mergeConfigs.mjs";
 import BlockSerializer from "../BlockSerializer/index.mjs";
 import baseConfig from "./config.mjs";
 const BlockDispatcher = (props) => {

package/components/BlockSerializer/index.js

@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const graphql = require("../../generated/graphql.js");
 const fragmentMasking = require("../../generated/fragment-masking.js");
 require("@okam/directus-query");
+require("graphql-request");
 require("radashi");
 const BlockSerializer = (props) => {
   var _a, _b, _c;

package/components/BlockSerializer/index.mjs

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { BlockSettingsFragmentDoc } from "../../generated/graphql.mjs";
 import { useFragment } from "../../generated/fragment-masking.mjs";
 import "@okam/directus-query";
+import "graphql-request";
 import "radashi";
 const BlockSerializer = (props) => {
   var _a, _b, _c;

package/generated/graphql.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
+const BlockSettingsFragmentDoc = {};
 exports.BlockSettingsFragmentDoc = BlockSettingsFragmentDoc;

package/generated/graphql.mjs

@@ -1,4 +1,4 @@
-const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
+const BlockSettingsFragmentDoc = {};
 export {
   BlockSettingsFragmentDoc
 };

package/index.d.ts

@@ -1,8 +1,8 @@
+export * from './utils';
 export type { BlockSettingsFragment } from './generated/graphql';
 export type { TBlockDispatcherProps } from './components/BlockDispatcher/interface';
 export type { TBlockSerializerConfig, TBlockSerializerProps, TBlock, TBlockSerializerConfigComponent, } from './components/BlockSerializer/interface';
 export type { TAdditionalProps, TCommonBlockFragment, TBlockQuery, TBlockDocument, TBlockVariables, } from './types/block';
 export { default as BlockWysiwyg } from './blocks/BlockWysiwyg';
-export { default as useBlock } from './hooks/useBlock';
 export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config';
 export { default as baseConfig } from './components/BlockDispatcher/config';

package/index.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index$1 = require("./utils/index.js");
 const index = require("./blocks/BlockWysiwyg/index.js");
-const useBlock = require("./hooks/useBlock.js");
 const config = require("./blocks/BlockWysiwyg/config.js");
 const config$1 = require("./components/BlockDispatcher/config.js");
+const getBlockProps = require("./utils/getBlockProps.js");
+const mergeConfigs = require("./utils/mergeConfigs.js");
+const fragmentMasking = require("./generated/fragment-masking.js");
+const getBlock = require("./utils/getBlock.js");
+exports.useBlock = index$1.useBlock;
 exports.BlockWysiwyg = index;
-exports.useBlock = useBlock;
 exports.blockWysiwygConfig = config;
 exports.baseConfig = config$1;
+exports.getBlockProps = getBlockProps;
+exports.mergeConfigs = mergeConfigs;
+exports.getFragment = fragmentMasking.useFragment;
+exports.getBlock = getBlock.getBlock;

package/index.mjs

@@ -1,10 +1,18 @@
+import { useBlock } from "./utils/index.mjs";
 import { default as default2 } from "./blocks/BlockWysiwyg/index.mjs";
-import { default as default3 } from "./hooks/useBlock.mjs";
-import { default as default4 } from "./blocks/BlockWysiwyg/config.mjs";
-import { default as default5 } from "./components/BlockDispatcher/config.mjs";
+import { default as default3 } from "./blocks/BlockWysiwyg/config.mjs";
+import { default as default4 } from "./components/BlockDispatcher/config.mjs";
+import { default as default5 } from "./utils/getBlockProps.mjs";
+import { default as default6 } from "./utils/mergeConfigs.mjs";
+import { useFragment } from "./generated/fragment-masking.mjs";
+import { getBlock } from "./utils/getBlock.mjs";
 export {
   default2 as BlockWysiwyg,
-  default5 as baseConfig,
-  default4 as blockWysiwygConfig,
-  default3 as useBlock
+  default4 as baseConfig,
+  default3 as blockWysiwygConfig,
+  getBlock,
+  default5 as getBlockProps,
+  useFragment as getFragment,
+  default6 as mergeConfigs,
+  useBlock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-block",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "3.2.0",
-    "@okam/directus-query": "1.4.2",
-    "@okam/stack-ui": "1.43.0",
+    "@okam/directus-query": "1.5.0",
+    "@okam/stack-ui": "1.44.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
     "radashi": "^12.3.0"

package/server.d.ts

@@ -1,5 +1,3 @@
 export { default as BlockDispatcher } from './components/BlockDispatcher';
 export { default as BlockSerializer } from './components/BlockSerializer';
-export { default as getBlockProps } from './utils/get-block-props';
-export { default as useBlock } from './hooks/useBlock';
-export { default as mergeConfigs } from './utils/merge-configs';
+export * from './utils';

package/server.js

@@ -3,11 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./components/BlockDispatcher/index.js");
 const index$1 = require("./components/BlockSerializer/index.js");
-const getBlockProps = require("./utils/get-block-props.js");
-const useBlock = require("./hooks/useBlock.js");
-const mergeConfigs = require("./utils/merge-configs.js");
+const index$2 = require("./utils/index.js");
+const getBlockProps = require("./utils/getBlockProps.js");
+const mergeConfigs = require("./utils/mergeConfigs.js");
+const fragmentMasking = require("./generated/fragment-masking.js");
+const getBlock = require("./utils/getBlock.js");
 exports.BlockDispatcher = index;
 exports.BlockSerializer = index$1;
+exports.useBlock = index$2.useBlock;
 exports.getBlockProps = getBlockProps;
-exports.useBlock = useBlock;
 exports.mergeConfigs = mergeConfigs;
+exports.getFragment = fragmentMasking.useFragment;
+exports.getBlock = getBlock.getBlock;

package/server.mjs

@@ -1,13 +1,17 @@
 "server-only";
 import { default as default2 } from "./components/BlockDispatcher/index.mjs";
 import { default as default3 } from "./components/BlockSerializer/index.mjs";
-import { default as default4 } from "./utils/get-block-props.mjs";
-import { default as default5 } from "./hooks/useBlock.mjs";
-import { default as default6 } from "./utils/merge-configs.mjs";
+import { useBlock } from "./utils/index.mjs";
+import { default as default4 } from "./utils/getBlockProps.mjs";
+import { default as default5 } from "./utils/mergeConfigs.mjs";
+import { useFragment } from "./generated/fragment-masking.mjs";
+import { getBlock } from "./utils/getBlock.mjs";
 export {
   default2 as BlockDispatcher,
   default3 as BlockSerializer,
+  getBlock,
   default4 as getBlockProps,
-  default6 as mergeConfigs,
-  default5 as useBlock
+  useFragment as getFragment,
+  default5 as mergeConfigs,
+  useBlock
 };

package/{hooks/useBlock.d.ts → utils/getBlock.d.ts}

@@ -1,4 +1,5 @@
 import { TToken } from '../../../../stack/stack-ui/src/index.ts';
+import { GraphQLClient } from 'graphql-request';
 import { TBlockSerializerProps } from '../components/BlockSerializer/interface';
 import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/block';
 
@@ -6,7 +7,7 @@ import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/
  * 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.
  * @param props Props of the block component. Pass props directly from the block component.
  * @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.
- * @param doc Alternative for passing the GraphQL document to the block component. If not passed, the document will be retrieved from the block's props or config.
+ * @param docOrClient Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`. **Deprecated**: can also be a fallback for `props.document`.
  * @returns The block data and its settings.
  *
  * @example
@@ -14,11 +15,22 @@ import { TBlockDocument, TBlockVariables, TCommonBlockFragment } from '../types/
  * const BlockButtons = (props: TBlockSerializerProps<BlockButtonsFragment>) => {
  *   const key = 'block_buttons_by_id'
  *   const { tokens } = props
- *   const { link, cmsTokens, variant } = await useBlock(props, key)
+ *   const { link, cmsTokens, variant } = await getBlock(props, key)
  *   return <Link {...link} tokens={{ ...tokens, ...cmsTokens, style: variant }} />
  * }
  * ```
  */
-export default function useBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, doc?: TBlockDocument<Fragment, Variables>): Promise<Fragment & {
+export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, 
+/**
+ * @default defaultGraphqlRequestClient
+ */
+client?: GraphQLClient): Promise<Fragment & {
+    cmsTokens: TToken;
+}>;
+export declare function getBlock<Fragment extends TCommonBlockFragment, Variables extends TBlockVariables = TBlockVariables>(props: TBlockSerializerProps<Fragment, Variables>, blockKey: string, 
+/**
+ * @deprecated Use props.document instead
+ */
+doc?: TBlockDocument<Fragment, Variables>): Promise<Fragment & {
     cmsTokens: TToken;
 }>;

package/utils/getBlock.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const directusQuery = require("@okam/directus-query");
+const graphqlRequest = require("graphql-request");
+const radashi = require("radashi");
+const fragmentMasking = require("../generated/fragment-masking.js");
+const graphql = require("../generated/graphql.js");
+const getBlockProps = require("./getBlockProps.js");
+function isClient(docOrClient) {
+  return docOrClient instanceof graphqlRequest.GraphQLClient;
+}
+async function getBlock(props, blockKey, docOrClient = directusQuery.defaultGraphqlRequestClient) {
+  const item = radashi.get(props, "item");
+  const isPropClient = isClient(docOrClient);
+  const document = radashi.get(props, "document");
+  const variables = radashi.get(props, "variables");
+  const propsWithFallback = await getBlockProps(
+    {
+      item,
+      blockKey,
+      document: document ?? (!isPropClient ? docOrClient : void 0),
+      variables
+    },
+    isPropClient ? docOrClient : void 0
+  );
+  const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+exports.getBlock = getBlock;

package/utils/getBlock.mjs

@@ -0,0 +1,29 @@
+import { defaultGraphqlRequestClient } from "@okam/directus-query";
+import { GraphQLClient } from "graphql-request";
+import { get } from "radashi";
+import { useFragment } from "../generated/fragment-masking.mjs";
+import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
+import getBlockProps from "./getBlockProps.mjs";
+function isClient(docOrClient) {
+  return docOrClient instanceof GraphQLClient;
+}
+async function getBlock(props, blockKey, docOrClient = defaultGraphqlRequestClient) {
+  const item = get(props, "item");
+  const isPropClient = isClient(docOrClient);
+  const document = get(props, "document");
+  const variables = get(props, "variables");
+  const propsWithFallback = await getBlockProps(
+    {
+      item,
+      blockKey,
+      document: document ?? (!isPropClient ? docOrClient : void 0),
+      variables
+    },
+    isPropClient ? docOrClient : void 0
+  );
+  const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+export {
+  getBlock
+};

package/utils/{get-block-props.d.ts → getBlockProps.d.ts}

@@ -12,7 +12,8 @@ type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVaria
  * Returns the passed item if it is defined. Otherwise, queried its own block
  * @param params.blockKey Key of the queried field
  * @param params.item Item of the block. If null or only contains the block's id, the function will make a query
+ * @param client Client to pass to `queryGql`. Defaults to `defaultGraphqlRequestClient`.
  * @returns The block data
  */
-export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>): Promise<BlockFragment | null | undefined>;
+export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>, client?: import('graphql-request').GraphQLClient): Promise<BlockFragment | null | undefined>;
 export {};

package/utils/{get-block-props.js → getBlockProps.js}

@@ -9,15 +9,15 @@ function isItemEmpty(item) {
   const { id, settings, ...restOfItem } = item ?? {};
   return radashi.isEmpty(restOfItem);
 }
-async function queryFromVariables(params) {
+async function queryFromVariables(params, client = directusQuery.defaultGraphqlRequestClient) {
   const { document, blockKey, variables } = params;
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await directusQuery.queryGql(document, variables);
+  const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;
 }
-async function getBlockProps(params) {
+async function getBlockProps(params, client = directusQuery.defaultGraphqlRequestClient) {
   const { document, item, blockKey, variables } = params;
   if (item) {
     if (!isItemEmpty(item)) {
@@ -31,7 +31,7 @@ async function getBlockProps(params) {
     });
   }
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await directusQuery.queryGql(document, variables);
+  const queriedBlockProps = await directusQuery.queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;

package/utils/{get-block-props.mjs → getBlockProps.mjs}

@@ -1,5 +1,5 @@
 "server-only";
-import { queryGql } from "@okam/directus-query";
+import { defaultGraphqlRequestClient, queryGql } from "@okam/directus-query";
 import { isEmpty } from "radashi";
 function isVariables(maybeVariables) {
   return !!maybeVariables;
@@ -8,15 +8,15 @@ function isItemEmpty(item) {
   const { id, settings, ...restOfItem } = item ?? {};
   return isEmpty(restOfItem);
 }
-async function queryFromVariables(params) {
+async function queryFromVariables(params, client = defaultGraphqlRequestClient) {
   const { document, blockKey, variables } = params;
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
+  const queriedBlockProps = await queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;
 }
-async function getBlockProps(params) {
+async function getBlockProps(params, client = defaultGraphqlRequestClient) {
   const { document, item, blockKey, variables } = params;
   if (item) {
     if (!isItemEmpty(item)) {
@@ -30,7 +30,7 @@ async function getBlockProps(params) {
     });
   }
   if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
+  const queriedBlockProps = await queryGql(document, variables, client);
   if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
   const queriedBlockFragment = queriedBlockProps[blockKey];
   return queriedBlockFragment;

package/utils/index.d.ts

@@ -1,5 +1,11 @@
 import { useFragment } from '../generated/fragment-masking';
+import { getBlock } from './getBlock';
 
-export { default as getBlockProps } from './get-block-props';
-export { default as mergeConfigs } from './merge-configs';
+/**
+ * @deprecated Use `getBlock` instead
+ */
+export declare const useBlock: typeof getBlock;
+export { default as getBlockProps } from './getBlockProps';
+export { default as mergeConfigs } from './mergeConfigs';
 export { useFragment as getFragment };
+export { getBlock };

package/utils/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getBlock = require("./getBlock.js");
+require("@okam/directus-query");
+require("radashi");
+const useBlock = getBlock.getBlock;
+exports.getBlock = getBlock.getBlock;
+exports.useBlock = useBlock;

package/utils/index.mjs

@@ -0,0 +1,8 @@
+import { getBlock } from "./getBlock.mjs";
+import "@okam/directus-query";
+import "radashi";
+const useBlock = getBlock;
+export {
+  getBlock,
+  useBlock
+};

package/hooks/useBlock.js

@@ -1,19 +0,0 @@
-"use strict";
-const radashi = require("radashi");
-const graphql = require("../generated/graphql.js");
-const fragmentMasking = require("../generated/fragment-masking.js");
-const getBlockProps = require("../utils/get-block-props.js");
-async function useBlock(props, blockKey, doc) {
-  const item = radashi.get(props, "item");
-  const document = doc ?? radashi.get(props, "document");
-  const variables = radashi.get(props, "variables");
-  const propsWithFallback = await getBlockProps({
-    item,
-    blockKey,
-    document,
-    variables
-  });
-  const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
-  return { ...propsWithFallback, cmsTokens: tokens };
-}
-module.exports = useBlock;

package/hooks/useBlock.mjs

@@ -1,20 +0,0 @@
-import { get } from "radashi";
-import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
-import { useFragment } from "../generated/fragment-masking.mjs";
-import getBlockProps from "../utils/get-block-props.mjs";
-async function useBlock(props, blockKey, doc) {
-  const item = get(props, "item");
-  const document = doc ?? get(props, "document");
-  const variables = get(props, "variables");
-  const propsWithFallback = await getBlockProps({
-    item,
-    blockKey,
-    document,
-    variables
-  });
-  const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
-  return { ...propsWithFallback, cmsTokens: tokens };
-}
-export {
-  useBlock as default
-};