[email protected]

Major Changes

• f893a7a: ## Introducing Pump: Fast Refresh for Your Content

  This new major introduces react-pump, a component that brings realtime updates from BaseHub into your app. Via a combination of React Server Components, React Server Actions, and the existing basehub SDK, it has a very elegant API and pushes forward our vision of making content editing (and previewing) seamless.

  This is a short example of how to use it:

  import { Pump } from "basehub/react-pump";
  
  const Page = () => {
    const yourLogicForDraftMode = true; // in Next.js, you'd use draftMode()
    return (
      <Pump queries={[{ _sys: { id: true } }]} draft={yourLogicForDraftMode}>
        {async ([data]) => {
          "use server";
  
          // `data` is typesafe, of course!
  
          return (
            <pre>
              <code>{JSON.stringify(data, null, 2)}</code>
            </pre>
          );
        }}
      </Pump>
    );
  };

  When draft === true, Pump will mount a Client Component that will subscribe to real time updates from BaseHub, and will push does updates to your render function in real time. This gives you "fast refresh" for your content.

  Pump relies on experimental React features: React Server Components, and Server Actions. Currently, Next.js is the only framework we know of that supports these.

  You may have a lot of questions, such as "why a component instead of a hook?", "why a render function, and why does it need to be async and have "use server"?", which we'll answer in our official Docs soon.

  Breaking Changes

  The basehub/react namespace has been removed in favour of having more specific namespaces. The only affected component (because is the only one we expose as of now) is RichText. This is how you migrate:

  - import { RichText } from 'basehub/react'
  + import { RichText } from 'basehub/react-rich-text'

  Mutations API Helpers

  With the introduction of the Mutation API, we've added some helper TypeScript types that will allow you to send mutations in a typesafe manner. For example:

  import { basehub } from "basehub";
  import { Transaction } from "basehub/api-transaction";
  
  export function Example() {
    return (
      <div>
        <form
          action={async () => {
            "use server";
            return await basehub({ cache: "no-cache" }).mutation({
              transaction: {
                __args: {
                  data: JSON.stringify([
                    {
                      type: "create",
                      data: {
                        type: "document",
                        title: "A Document from our API",
                        value: [
                          {
                            type: "text",
                            title: "hero title",
                            value: "Hello World!",
                            isRequired: true,
                          },
                        ],
                      },
                    },
                  ] satisfies Transaction),
                },
              },
            });
          }}
        >
          <button>Submit</button>
        </form>
      </div>
    );
  }

  ---

  Enjoy, and go write!

[email protected]

Patch Changes

• d4c0021: fix multiple pusher connections being created

[email protected]

Major Changes

• b3ff244: Add next-pump: fast refresh for your content. And also go full ESM.

[email protected]

Patch Changes

• e489ff6: pass code as a string param

[email protected]

Patch Changes

• 706a871: Pass language to code handler

[email protected]

Patch Changes

• 89d6004: expose language on pre

[email protected]

Patch Changes

• 53b559d: Actually pass caption

[email protected]

Patch Changes

• 2f7ac52: Add caption to image

[email protected]

Patch Changes

• 67e81df: update genql to fix --turbo

[email protected]

Patch Changes

• d5b686f: make rich text return a ReactNode type