What’s next for React Apollo

tldr;

npm i react-apollo@beta --save

I’m super excited to announce the first beta of React Apollo version 2.1. It is a non-breaking change (unless you are using TypeScript) with a ton of new features, so go install it right now! It adds a new component API, smaller bundle size, and better TypeScript support, and even supports Preact for server-side rendering.

Design is never done

It has been over a year and a half since this pull request was merged, creating the current React Apollo API. Back then, Sashko Stubailo and Jonas Helfer were hard at work making the core Apollo Client the best way to use GraphQL, and I was a member of the Apollo community happily designing the integration my team at the time wanted to use to ship our app faster. At that time, Apollo Client was averaging around 3,000 downloads per week and React had a little over 400,000. Redux and HOC’s were all the rage, with libraries like Recompose being a pretty incredible way to build with React.

Fast forward to today.

Apollo Client is now used over 150,000 times a week and React has grown to a massive 1.7 million a week! With both of these projects growing, the community was bound to grow and change. Full, “Component-based” APIs like React Router 4, Formik, and more are pushing more composition into the render function and away from patterns like higher order components. At the same time, the abilities and usage of Apollo has grown to include things like local state, REST endpoints, and more and more features around working with GraphQL endpoints.

Now, it’s time for a change, or rather an addition:

With React Apollo 2.1, we are introducing the Query component, a great way to bring data into your render.

This design was worked on for over a month with a ton of members of the Apollo community. A huge shout out goes to Kevin Ross, Dirk-Jan Rutten, and Leonardo A Garcia C who really put in the hard work of writing, testing, and rewriting to find an API that is flexible but brings all of the improvements that render props can offer into an app. The work of these three show how strong and passionate the Apollo community is in building what app developers need.

Query Component

The standout feature of React Apollo 2.1 is the Query component. Using it goes a little something like this:

import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const query = gql`
  query SomeQuery {
    foo {
      bar
      baz
    }
  }
`;
function MyComponent() {
  return (
    <Query query={query}>
      {(result) => {
        if (result.loading) return <Loading />;
        if (result.error) return <Error error={error} />;
         
        const { data } = result;
        
        return <h1>Hello {data.foo.bar} {data.foo.baz}!</h1>;
      })
    </Query>
  );
}

Instead of exporting a wrapped component using the graphql HOC, you put your query right into the render function whenever you need data! It takes a function as a child, which is quickly becoming the go-to way to use a render prop in React. In doing this, a few exciting features are opened up:

• Choosing a dynamic query based on what props are used
• Updating the state of the component that is showing the data without passing down a prop
• Easy composition of multiple operations

Though partially cosmetic, the design decisions that went into this component come from real-world use by a ton of Apollo developers. Peter Piekarczyk started this off with his project Apollo Tote, which was solving real needs of his app. We always want Apollo to be driven by the needs of product teams and I think this is a great example of the community designing what is best!

Preact support

It (kinda) all started from a James Kyle tweet…

…which led to Max Stoiber pointing out a problem…

…which brought out Jason Miller to find a solution!

Support for Preact has always been on the list of wants for React Apollo, but sometimes you need a little help from your friends. With Jason’s guidance, React Apollo 2.1 supports Preact (using preact-compat) for both client and server usage.

TypeScript improvements

We are always looking to leverage the typed nature of GraphQL to make client apps type safe. For example, the work Grégoire Vda has been doing with Reason Apollo informed some of the work on the new React Apollo design. Now the React Apollo code base doesn’t use the any type at all, and the test suites are actually type-checked as well!

The graphql HOC parameterized types have been streamlined to support full typing, better ease of use, and consistency with the rest of the project. The new parameterized signature isgraphql<TProps, TData, TGraphQLVariables, TChildProps>, where none are required and full typing only requires the first three types. This means that your variables are now correctly checked when performing mutations or queries!

The road ahead

This is a first beta of this design and we are eager to get your feedback! Try installing react-apollo@betatoday and report any issues you run into. The upgrade should work out of the box (no breaking changes) and an initial usage doc of the new Query component can be found here. I even updated Peggy Rayzis’ famous bitcoin demo to show the new component in action:CodeSandboxCodeSandbox is an online editor tailored for web applications.codesandbox.io

Thanks to all of the amazing contributors who have helped out on this release! We hope you love it!

Written by

James Baxley III

Read more by James Baxley III