@gluonjs/core / packages/graphql/src / createGraphQLResource

Function: createGraphQLResource()

createGraphQLResource<TReference, TData, TVariables>(options): GraphQLResource<TReference, TData>

Type Parameters

TReference

TReference

TData

TData

TVariables

TVariables = Readonly<Record<string, unknown>>

Parameters

options

GraphQLResourceOptions<TReference, TData, TVariables>

Returns

GraphQLResource<TReference, TData>

Example

Define one typed resource that can be prefetched by SSR or read by a component:

import {
  GraphQLRequestError,
  GraphQLTimeoutError,
  createContentfulGraphQLFetcher,
  createFetchGraphQLFetcher,
  createGraphQLResource,
  createGraphQLResourceContext,
  hydrateGraphQLResourceState,
  parseGraphQLResourceState,
  serializeGraphQLResourceState,
  snapshotGraphQLResourceState,
  type ContentfulGraphQLFetcherOptions,
  type FetchGraphQLFetcherOptions,
  type GraphQLErrorLike,
  type GraphQLDocument,
  type GraphQLFetchRequest,
  type GraphQLFetcher,
  type GraphQLRequestOptions,
  type GraphQLResource,
  type GraphQLResourceContext,
  type GraphQLResourceContextOptions,
  type GraphQLResourceOptions,
  type GraphQLResourceSnapshot,
  type GraphQLResourceSnapshotEntry,
  type GraphQLResponse,
  type GraphQLVariables,
} from '@gluonjs/graphql';

type Product = { id: string; title: string };
type Reference = { id: string };
const document: GraphQLDocument = 'query Product($id: ID!) { product(id: $id) { id title } }';
const variables: GraphQLVariables = { id: '4711' };
const typedVariables: Reference = { id: '4711' };
const response: GraphQLResponse<Product> = { data: { id: '4711', title: 'Desk lamp' } };
const errors: readonly GraphQLErrorLike[] = [{ message: 'Unavailable' }];
const fetchOptions: FetchGraphQLFetcherOptions = { endpoint: 'https://example.test/graphql' };
const fetcher: GraphQLFetcher<Product, Reference> = createFetchGraphQLFetcher(fetchOptions);
const resourceOptions: GraphQLResourceOptions<Reference, Product, Reference> = { key: ({ id }) => `product:${id}`, query: document, variables: ({ id }) => ({ id }), fetcher };
const contextOptions: GraphQLResourceContextOptions = {};
const context: GraphQLResourceContext = createGraphQLResourceContext(contextOptions);
const resource: GraphQLResource<Reference, Product> = createGraphQLResource(resourceOptions);
const requestOptions: GraphQLRequestOptions = { context };
const request: GraphQLFetchRequest<Reference> = { document, query: String(document), variables: typedVariables, signal: new AbortController().signal };
const snapshotEntry: GraphQLResourceSnapshotEntry = { key: 'product:4711', data: response.data };
const snapshot: GraphQLResourceSnapshot = { version: 1, resources: [snapshotEntry] };
const contentfulOptions: ContentfulGraphQLFetcherOptions = { space: 'space', accessToken: 'server-token', preview: false, locale: 'en-US' };
const contentful = createContentfulGraphQLFetcher<Product, Reference>(contentfulOptions);
const httpError = new GraphQLRequestError('Unavailable', { code: 'GRAPHQL_HTTP_ERROR', status: 503, errors });
const timeoutError = new GraphQLTimeoutError(1000);
const loaded = resource.peek({ id: '4711' }, context);
void [request, variables, response, errors, requestOptions, resource, context, snapshot, contentful, httpError, timeoutError, loaded, resource.read({ id: '4711' }, requestOptions), resource.prefetch({ id: '4711' }, requestOptions), resource.invalidate({ id: '4711' }, context), serializeGraphQLResourceState(context), snapshotGraphQLResourceState(context), parseGraphQLResourceState(JSON.stringify(snapshot)), hydrateGraphQLResourceState(context, snapshot)];