Skip to main content

Introducing Isograph 0.2.0

Another year, another tremendous milestone!

Words cannot express how excited the Isograph team is to announce the release of Isograph 0.2.0. This release is chock full of features, including:

  • fully-featured @component client fields
  • automatic typing
  • compiler watch mode
  • @loadable fields
  • pagination
  • network error handling
  • fragment variables
  • garbage collection
  • fine grained re-rendering
  • support for Windows
  • finer control over re-exposed fields

Let's run through each of these in turn!

@component client fields​

As of 0.1.0, Isograph @component client fields had to be interpolated. That's awkward! In 0.2.0, they can be used like regular components!

export const BlogPostDisplay = iso(`
  field BlogPost.BlogPostDisplay @component {
    BlogPostHeader
  }
`)(blogPost => <blogPost.BlogPostHeader />)

Much better!

Automatic typing​

The first parameter to client fields is fully statically typed! Consider this BlogPostHeader:

import { iso } from '@iso';
export const BlogPostHeader = iso(`
  field BlogPost.BlogPostHeader @component { 
    title
    author
  }
`)((blogPost) => (
  <>
    <h1>{blogPost.title}</h1>
    <h2>{blogPost.author}</h2>
  </>
));

The blogPost parameter will have type

type BlogPost__BlogPostHeader__param = {
  title: string | null | undefined;
  author: string | null | undefined;
};

and VSCode (or your IDE of choice) will know about it!

That's because the iso function is overloaded at its definition. It's a function that, if passed a string starting with field BlogPost.BlogPostHeader, will pass an object of type BlogPost__BlogPostHeader__param to the resolver function.

This overload is generated by the Isograph compiler, so as soon as you save, it will get updated and VSCode will learn about it!

Compiler watch mode​

Speaking of "as soon as you save", the Isograph compiler now comes with a watch mode!

Now, if run with yarn iso --watch, the Isograph compiler will re-run on every save!

Loadable fields​

If there weren't so many other huge features in this release, this would be a marquee feature on its own!

Isograph now ships with loadable fields, which are like entrypoints (i.e. separate queries) embedded in other queries!

With loadable fields, you can:

  • @defer data
  • paginate
  • load data in response to user actions, such as clicks

Loadable fields can also be used to asynchronously load JavaScript, so they also let you do Relay entrypoints in userland.

So, this means we can load only the JavaScript for objects that we actually encounter (e.g. load a VideoPlayer component if and only if we encounter a news feed item containing a video!)

There's so much more to be said about this topic, so for now, see the loadable fields documentation.

Pagination​

As mentioned above, loadable fields can power pagination! See the documentation.

The best part about this is that this is entirely doable in userland, so if you want behavior that's appropriate for your specific use case, you can implement that!

Network error handling​

You can now throw if a network request errored out.

Fragment variables​

All variables in Isograph are local now. No more confusing global variables :)

Garbage collection​

When fragment references are disposed (e.g. if a component that calls useLazyReference unmounts), the data they protect is liable to be garbage collected. This ensures that the memory usage of the Isograph store does not grow without bound over time!

Fine-grained re-rendering​

Now, Isograph @component client fields will re-render if and only if the data read out by the first parameter has actually changed.

There should be very few unnecessary re-renders!

(There are still some unnecessary re-renders due to loadable fields appearing different from render-to-render, but this there is an open issue, and fixing this is a great first issue!)

Support for Windows​

Isograph now builds on Windows! Woohoo!

Thank you to adrtivv for fixing this!

Finer control over re-exposed fields​

As of last year's GraphQL conf, re-exposed mutation fields were not configurable. But now they are!

Conclusion​

So many of these deserve their own blog post. But the point is simply this — many patterns that were previously impossible to do in Isograph are doable now! Isograph is suitable for more projects, and the developer experience is better than ever!

So go ahead, follow the quickstart and give it a try!