@lucagoslar/graphql-fetch NPM

@lucagoslar/graphql-fetch

A small optionally typed 📊QL client leveraging the fetch API. (~435 B min + gz)

Index

Usage

Import, instantiate and set up a client.

import { GraphQLClient } from '@lucagoslar/graphql-fetch';

const resource: string = 'ENDPOINT';
const init: RequestInit = {
	mode: 'cors',
	headers: {
		Authorization: '<auth-scheme> <credentials>',
	},
};

const client = new GraphQLClient(resource, init);

Create a GraphQL query or mutation.

import { gql } from '@lucagoslar/graphql-fetch';

const query = gql`
	query Country($code: ID!) {
		country(code: $code) {
			native
		}
	}
`;

const variables = {
	code: 'DE',
};

Pass optional parameters when executing a request and handle the response.

const result = await client.request<{ country: { native: string } }>(
	query,
	variables
);

console.log(result); // { data: { country: { native: 'Deutschland' } }, errors: undefined }

Optionally add a custom fetch function.

// Example with SvelteKit
// +page.server.ts

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (request) => {
	const result = await client
		.customFetch(request.fetch)
		.request<{ country: { native: string } }>(query, variables);

	return result;
};