Feature Request: Add GraphQL Query Wrapper to Storyblok JS Client

[edodusi]

Problem Statement

Currently, when working with GraphQL queries in Storyblok, we need to handle them outside the JS client instance. This separation leads to:

• Inconsistent request handling
• Separation of states (eg. registered components)
• Less coherent codebase structure and DX

Proposed Solution

Add a GraphQL wrapper method to the Storyblok JS Client that allows executing GraphQL queries through the client instance itself.

Proposed API

// GraphQL query
const query = `
  query {
    PageItem(id: $id) {
      name
      content {
        _uid
        component
      }
    }
  }
`;

// Parameters
const version = 'draft';
const variables = { id: '<story-id-123123>' };

// Execution
const response = await StoryblokClient.graphql(query, version, variables);

Benefits

1. Consistency: All API interactions happen through the client instance with the same state
2. Simplification: No need to manage separate GraphQL request logic
3. Better Integration: Leverages existing client configuration and error handling
4. Maintainability: Centralizes API interaction logic in one place

Implementation Details

A proof of concept implementation has already been created and can be found here:
storyblok/storyblok-js-client#868

Questions for Discussion

1. How is the proposed DX? Should we consider additional parameters for the GraphQL wrapper?
2. How should we handle caching and throttling for GraphQL queries?
3. Should we provide helper methods for common GraphQL operations?

References

• Related PR: #868

[linear]

WDX-13 Feature Request: Add GraphQL Query Wrapper to Storyblok JS Client