Skip to content

Commit

Permalink
feat: add interface and union support (#44)
Browse files Browse the repository at this point in the history
* feat: implement interface and union support

closes #33

* docs: interfaces and unions

* docs: add example project for interfaces and unions

* docs: update example project text for interfaces and unions

* docs: fix typo in example project for interfaces and unions
  • Loading branch information
schettn authored Nov 6, 2024
1 parent f3a094e commit 1431020
Show file tree
Hide file tree
Showing 19 changed files with 1,550 additions and 60 deletions.
6 changes: 6 additions & 0 deletions docs/pages/blog/_meta.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
{
"pylon-2.3": {
"title": "Pylon 2.3: Full Support for TypeScript Interfaces and Unions in Pylon",
"theme": {
"breadcrumb": true
}
},
"pylon-2.0": {
"title": "Pylon 2.0: Multiple Runtime Support",
"theme": {
Expand Down
169 changes: 169 additions & 0 deletions docs/pages/blog/pylon-2.3.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
---
description: 'Pylon v2.3 introduces full support for TypeScript interfaces and unions, making it easier to define complex type hierarchies in your GraphQL schemas.'
---

import Authors, {Author} from '@components/authors'

# Exciting Update: Full Support for TypeScript Interfaces and Unions in Pylon

<Authors date="November 4th, 2024">
<Author name="Nico Schett" link="https://github.com/schettn" />
</Authors>

We're thrilled to announce a significant enhancement to Pylon: full support for TypeScript interfaces and unions! This new feature dramatically improves the flexibility and expressiveness of your GraphQL schemas, allowing for more complex and nuanced type definitions.
For more information, see the [release notes](../docs/release-notes/v2.3.mdx).

## What's New?

Pylon now has improved capabilities in translating TypeScript interfaces and unions into GraphQL schemas. The key enhancement is in how Pylon determines whether to create a GraphQL interface or a union based on the structure of your TypeScript types.

### Unions

When you use a TypeScript union, Pylon will create a GraphQL interface or union, depending on the structure of the types involved.

For shared properties, Pylon generates an interface:

```typescript
type Bar = {
id: ID
title: string
}

type Foo = {
id: ID
name: string
}

type Example = Foo | Bar
```
This produces the following GraphQL schema:
```graphql
interface Example {
id: ID!
}

type Foo implements Example {
id: ID!
name: String!
}

type Bar implements Example {
id: ID!
title: String!
}
```

For types without shared properties, Pylon creates a union:

```typescript
type Foo = {
birthday: Date
}

type Bar = {
age: number
}

type Example = Foo | Bar
```
Resulting in:
```graphql
type Foo {
birthday: Date
}

type Bar {
age: Int
}

union Example = Foo | Bar
```

### Interfaces

Pylon now fully supports TypeScript interfaces, automatically generating the corresponding GraphQL interfaces:

```typescript
interface NodeInterface {
id: string
}

class NodeC1lass implements NodeInterface {
constructor(public id: string) {}
}

class NodeC2lass implements NodeInterface {
constructor(public id: string) {}
public extra = 'extra'
}
```

### Automatic Type Resolution

One of the most exciting aspects of this update is that Pylon automatically handles type resolution. You no longer need to manually implement a `__resolveType` function as you would with other GraphQL servers. Pylon intelligently determines the correct type for you.

## Why This Matters

This enhancement brings several benefits:

1. **Improved Type Safety**: Your GraphQL schema now more closely mirrors your TypeScript types, reducing the risk of type mismatches.
2. **Enhanced Code Reusability**: Interfaces allow you to define common fields across multiple types, promoting DRY (Don't Repeat Yourself) principles.
3. **More Flexible Queries**: Unions and interfaces enable more dynamic and flexible GraphQL queries, allowing clients to request data from multiple types in a single query.
4. **Simplified Development**: Automatic type resolution means less boilerplate code and fewer opportunities for errors.

## Getting Started

To take advantage of these new features, simply update to the latest version of Pylon. Your existing TypeScript interfaces and unions will automatically be reflected in your GraphQL schema.

Here's a quick example of how you might use these new features:

```typescript
import {app, ID} from '@getcronit/pylon'

type Node = User | Post

interface User {
id: ID
name: string
}

interface Post {
id: ID
title: string
}

const nodes: Node[] = [
{id: '1', name: 'John Doe'},
{id: '2', name: 'Jane Doe'},
{id: '3', title: 'Hello, World!'},
{id: '4', title: 'Hello, Pylon!'}
]

export const graphql = {
Query: {
node: (id: ID): Node => {
const node = nodes.find(node => node.id === id)
if (!node) throw new Error('Node not found')
return node
}
}
}

export default app
```

This will generate a GraphQL schema that includes a `Node` interface implemented by both `User` and `Post` types, allowing for flexible querying of these types.

## Example Project

To give you a deeper insight, we have built an [example project](https://github.com/getcronit/pylon/tree/main/examples/interfaces-and-unions) in which the new interface and union types are used. Feel free to check it out and experiment with the new features.

## Conclusion

We're excited to see what you'll build with these new capabilities. As always, we're committed to making Pylon the most developer-friendly way to create GraphQL APIs with TypeScript.

Happy coding!
1 change: 1 addition & 0 deletions docs/pages/docs/core-concepts/_meta.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"automatic-graphql-api-generation": "Automatic GraphQL-API Generation",
"type-safety-and-type-integration": "Type Safety and Type Integration",
"interfaces-and-unions": "Interfaces and Unions",
"built-in-authentication-and-authorization": "Built-in Authentication and Authorization",
"logging-and-monitoring": "Logging and Monitoring",
"context-management": "Context Management",
Expand Down
Loading

1 comment on commit 1431020

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for pylon-docs ready!

✅ Preview
https://pylon-docs-8udl7gaxy-schettns-projects.vercel.app

Built with commit 1431020.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.