feat: new graphql method on the client, wrapping graphql calls for the gapi endpoint

[edodusi]

Pull request type

New feature

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Other (please describe):

How to test this PR

1. Instantiate a new client:

const Storyblok = new StoryblokClient({
  accessToken: "<YOUR_ACCESS_TOKEN>",
});

2. Create a GraphQL query against your Space with a variable id for the Story:

const query = `
    query($id: ID!) {
         story: PageItem(id: $id) {
              slug
              name
              content {
                _uid
                component
              }
            }
          }`;

3. Call the graphql() method

await Storyblok.graphql(query, 'draft', { id: '<YOUR_STORY_ID>' });

What is the new behavior?

This introduces a simple wrapper graphql() that can be used to make GraphQL calls preserving the StoryblokClient instance instead of having to initialize a new one.

This is useful when you have a shared instance of the client and cannot re-initialize for each call.

Other information

This PR does not break existing implementations because it just adds a new method.
This also introduces an interface for the Storyblok Class for better typings.

Note

This new wrapper is not mandatory, users can still call the gapi with custom calls or use the Client with REST apis.
However, this should let us fix an issue that some users raised with the storyblok-react SDK, when used with Next.js App Router and Server Components: some users are using the SDK but adding custom GraphQL calls, making it difficult for them to mix the two approaches. Here they can wrap their calls while preserving the Client instance.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/storyblok-js-client@868

commit: 26b76ba