typed-graphql-fragments
v1.0.6
Published
A package for creating template strings for GraphQL fragments using typed objects
Downloads
9
Maintainers
Readme
Typed GraphQL Fragments
Typed GraphQL Fragments is a TypeScript utility for generating strongly-typed GraphQL fragments from configuration objects. This package allows you to define your GraphQL fragment selections using TypeScript types, ensuring that your fragments remain consistent with your data models.
Features
- Type Safety: Define your GraphQL fragments using TypeScript types, reducing the risk of errors and ensuring that your fragments align with your backend models.
- Flexible Configuration: Easily configure which fields to include in your fragments, even for deeply nested structures.
- Convenient Utilities: Provides a simple API for generating both fragment strings and configuration objects for GraphQL queries.
Installation
You can install this package via npm:
npm install typed-graphql-fragments
Or with Yarn:
yarn add typed-graphql-fragments
Usage
Here's a quick example of how to use Typed GraphQL Fragments:
import { createFragment, FieldSelectionConfig } from 'typed-graphql-fragments';
interface User {
id: number;
name: string;
posts: {
title: string;
content: string;
comments?: {
text: string;
author: {
name: string;
email: string;
};
}[];
}[];
}
const userConfig: FieldSelectionConfig<User> = {
id: true,
name: true,
posts: [
{
title: true,
content: false,
comments: [
{
text: true,
author: {
name: true,
email: true,
},
},
],
},
],
};
const fragment = createFragment<User>(userConfig)();
console.log(fragment);
This would output:
id
name
posts {
title
comments {
text
author {
name
email
}
}
}
Generating a Configuration Object
If you want to generate a configuration object instead of a string, you can do so by passing true to the asFieldConfig
parameter:
const configResult = createFragment<User>(userConfig)(true);
console.log(configResult);
This will output the original userConfig
object, , useful for cases where you might want to reuse or manipulate the configuration.
Why Use a Configuration Object?
Creating a configuration object can be particularly useful when you want to reuse fragments across different queries or mutate the configuration dynamically. Here’s how this might look:
interface Category {
id: number;
name: string;
description: string;
}
interface Product {
id: number;
name: string;
price: number;
stock: number;
category: Category;
}
// Reusable fragment for Category
export const categoryFragment = <T extends boolean | undefined = undefined>(
asFieldConfig?: T,
): T extends true ? FieldSelectionConfig<Category> : string =>
createFragment<Category>({
id: true,
name: true,
description: true,
})(asFieldConfig);
// Fragment for Product, reusing the Category fragment as a configuration object
export const productFragment = createFragment<Product>({
id: true,
name: true,
price: true,
stock: true,
category: categoryFragment(true), // Using the Category fragment as a configuration object
});
const productQueryFragment = productFragment();
console.log(productQueryFragment);
// This would output:
id
name
price
stock
category {
id
name
description
}
API Reference
createFragment<T>(config: FieldSelectionConfig<T>)
Parameters:
config
: An object defining which fields to include in the fragment.
Returns:
A function that, when called, generates either a GraphQL fragment string or the original configuration object, depending on whether asFieldConfig is true or false.
FieldSelectionConfig<T>
: A TypeScript type representing the configuration object used to define field selections in a fragment.
Contributing
Contributions are welcome! Please follow these steps:
Fork the repository.
Create a new branch (git checkout -b feature-branch
).
Make your changes.
Commit your changes (git commit -m 'Add new feature'
).
Push to the branch (git push origin feature-branch
).
Open a pull request.
License
This project is licensed under the MIT License.