API Content

API Content blocks allow you to fetch and display data from external APIs directly in your Vyuh application. This powerful feature enables you to integrate with any third-party service or your own custom backend, making your content dynamic and up-to-date.

Schema Configuration

Sanity Schema

The API Content block is defined in the Sanity schema as follows:

// In your feature descriptor
import { APIContentDescriptor } from '@vyuh/sanity-schema-system'

export const myFeature = new FeatureDescriptor({
  name: 'myFeature',
  title: 'My Feature',

  contents: [
    new APIContentDescriptor({
      // Define custom API configurations
      configurations: [
        // Your custom API configuration schemas
        myCustomAPIConfigSchema,
      ],
    }),
  ],
})

Content Structure

// API Content object structure
interface APIContent {
  _type: 'vyuh.apiContent'
  showPending: boolean // Show visual feedback during loading
  showError: boolean // Show visual feedback for errors
  configuration: {
    _type: string // Your custom API configuration type
    // Configuration-specific properties
  }[]
}

Note

The API Content block is designed to be extensible. You can create configurations for any API service, from weather data to e-commerce products, social media feeds, or your own custom backend.

Extensibility

Schema Descriptors

The APIContentDescriptor in the schema system provides the following extensibility points:

• configurations: Register custom API configuration types that define how to connect to external services

// Schema-side descriptor
new APIContentDescriptor({
  configurations: [graphQLAPIConfig, restAPIConfig, weatherAPIConfig],
})

React Descriptors

In the React system, API content is configured using the APIContentDescriptor:

// React-side registration
import { APIContentDescriptor } from '@vyuh/react-feature-system';
import { ContentExtensionDescriptor } from '@vyuh/react-extension-content';
import { FeatureDescriptor } from '@vyuh/react-core';

new FeatureDescriptor({
  name: 'myFeature',
  extensions: [
    new ContentExtensionDescriptor({
      contents: [
        new APIContentDescriptor({
          configurations: [
            GraphQLAPIConfig.typeDescriptor,
          ],
        }),
      ],
    }),
  ],
});