Skip to main content

Isograph v0.1.0 release notes

This release is jam-packed full of amazing features and DevEx improvements!

Client-defined @component fields can be used as React components​

The most-requested DevEx improvement has arrived! Client-defined @component fields can be used directly as React components!

For example, if we select a User.Avatar client-defined @component field in the User.UserProfile field, it can be rendered as <props.data.Avatar />!

export const UserProfile = iso`
  field User.UserProfile @component {
    full_name,
    Avatar,
  }
`(function UserProfile(props) {
  return (
    <>
      <h1>Hello {props.data.full_name}!</h1>
      <props.data.Avatar />
    </>
  );
});

Major thanks to Alec Aivazis for explaining how this is done in Houdini, and to Christoph Nakazawa for convincing me of the importance of this feature.

Commit.

Users do not have to provide types​

Another absolutely groundbreaking feature! Users no longer have to provide any type parameters to the iso function. Instead, those types generated by the compiler, and thus come automatically to the developer.

Major thanks to Terence Bezman for explaining how this can be done, and to Alec Aivazis for proving this out in Houdini. And a huge shoutout to Edmondo Porcu for hitting it out of the park with the implementation of this feature!

Commit

Installable via yarn​

Everything can be installed with yarn! Add Isograph to an existing project with:

yarn add --dev @isograph/compiler
yarn add --dev @isograph/babel-plugin
yarn add @isograph/react

Watch mode​

The compiler can now be run in watch mode with yarn iso --watch, and even provides pretty error messages:

Starting to compile.
Error when compiling.

Error when validating schema, resolvers and fetch declarations.

In the resolver `Actor.UserLink`, the field `Actor.foo` is selected, but that field does not exist on `Actor`
/Users/rbalicki/code/isograph/demos/github-demo/src/isograph-components/UserLink.tsx

  field Actor.UserLink @component {
    login,
    foo,
    ^^^
  }

Compilation took 139ms.

A brand-new isograph.dev​

You're looking at it now!

Babel plugin​

In another DevEx win, Isograph now comes with a Babel plugin that replaces calls to iso(`entrypoint Type.Field`) with require calls to the generated entrypoint artifact.

Entrypoints​

Goodbye @fetchable client-defined fields, hello entrypoints! The Isograph mental model has been substantially simplified.

When the Isograph compiler encounters an Isograph literal of the form iso(`entrypoint Query.field`), it will generate a query text for that field. This entrypoint can be passed to useLazyReference, which will make the network request during the initial render of a component.

Configurable magic mutation fields​

Magic mutation fields are fields that are added to certain types. When read out, these fields are functions that trigger mutations. For example, you might configure a User.set_name field to call the Mutation.set_name mutation.

These are now configurable in schema extensions via the @exposeField directive. See the documentation.

Commits: 1 and 2.

Integer literals​

Isograph now supports integer literals as parameters, in addition to variables.

Commit

Do not require a specific const export name​

The name of the export is now arbitrary, as it is understood by the compiler.

Commit

iso and isoFetch are combined​

In a win for DevEx and simplicity, isoFetch has been replaced by iso(`entrypoint ...`). Major thanks to Edmondo Porcu for working on this feature.

Commit

Full support for the GraphQL schema syntax​

The rest of GraphQL schema syntax is now supported. (Please let us know if we missed anything!)

Magic mutation fields on interface types​

A magic mutation field defined on an interface type (e.g. addLabelToLabelable, where a Labelable is an interface) will now show up on concrete types that implement that interface (e.g. repository { addLabelToLabelable } is valid).

note

There is a great first issue to do the same for client-defined fields.

Commit

Beautiful error messages​

The compiler now prints pretty error messages.

CI​

There is now a GitHub CI pipeline that:

  • builds the compiler and demos
  • runs unit tests
  • ensures no changes occur after yarn format
  • publishes the website
  • publishes new versions of the site

Isograph environment is held in context​

The Isograph environment is held in context now, and there are associated changes to the API.

Commit Commit Commit