2.1 Beta!

This beta is the incredible work of @rosskevin, @excitement-engineer, and @leoasis who took the roadmap and made it a better reality! Docs are coming ASAP for this alpha but here is the changelog as a start. You can also checkout a quick example while we get the upgrade guide in order:

New Query Component

This component allows you to fetch data by just rendering it! You will get all the data, results and loading information as a parameter in a render prop in the children. Here's an example:

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>
  );
}

This provides a more powerful way to manage your queries and to compose them, compared to the graphql HoC we already provide. For example, it's really handy and clearer for defining fallbacks to another query when you don't have results in the first one:

function MyComponent() {
  return (
    <Query query={mainQuery}>
      {(result) => {
        if (result.loading) return <Loading />;
        if (result.error) return <Error error={error} />;
         
        const { data } = result;
        
        if (data.items.length > 0) {
          return <Results items={data.items} />;
        } else {
          return (
            <Query query={fallbackQuery}>
              {(result) => {
                // ... handle fallback results as you want
              }}
            </Query>
          );
        }
      })
    </Query>
  );
}

The Query component accepts the following props:

• query: The compiled GraphQL query you want to execute
• variables?: An object that maps variable names to their values. Use this if the query you specified requires variables.
• fetchPolicy?: Same as in the graphql HoC
• notifyOnNetworkStatusChange?: Same as in the graphql HoC
• pollInterval?: Same as in the graphql HoC
• children(result): A function that will be called at different points in the lifetime of the query, like loading for the first time, loading more items, when an error happens, when the results appear. It is provided with a single parameter, result.

The result API is:

• data: The result from the query.
• loading: Wether the query is loading or not. Same behavior as in graphql HoC.
• error?: If an error occurred this will be populated. Same as in graphql HoC
• networkStatus: Same as in graphql HoC
• client:
• fetchMore: Same as in graphql HoC
• refetch: Same as in graphql HoC
• startPolling: Same as in graphql HoC
• stopPolling: Same as in graphql HoC
• updateQuery: Same as in graphql HoC

Here's an example of a query from GitHunt that you used to write with graphql HoC, using the new Query component:

Before:

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

class Profile extends Component { ... }

const CurrentUserForLayout = gql`
  query CurrentUserForLayout {
    currentUser {
      login
      avatar_url
    }
  }
`;

const ProfileWithData = graphql(CurrentUserForLayout)(Profile);

After:

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

class Profile extends Component { ... }

const CurrentUserForLayout = gql`
  query CurrentUserForLayout {
    currentUser {
      login
      avatar_url
    }
  }
`;

const ProfileWithData = () => (
  <Query query={CurrentUserForLayout}>
    {(result) => {
      const { data, ...rest } = result;
      return <Profile data={{...data, ...rest}} />;
    }}
  </Query>
);

Let us know what you think about this new component! We think you'll like it. As we're still polishing the API and learning from more use cases from the community, your feedback is definitely welcome. Show us what cool things you build with the Query component!

Changelog

• NEW FEATURES

  • Added <Query /> component #1398
  • Add <ApolloConsumer /> component #1399 #1484
  • Added support for Preact when using getDataFromTree #1561

• BREAKING CHANGES [Removal of deprecated code]

  • Remove deprecated operationOptions.options.skip, use operationOptions.skip instead

• BREAKING CHANGES [TypeScript and Flow only]

  • typescript - graphql parameterized types streamlined for
    a) full typing; and b) ease of use; and c) consistency. New parameterized is:
    graphql<TProps,TData, TGraphQLVariables, TChildProps> where none are required and full typing only requires the
    first three params (TChildProps can be derived). #1402
  • Rename type ProviderProps to ApolloProviderProps #1467
  • Rename getDataFromTree type QueryResult to QueryTreeResult #1467
  • Rename type QueryProps to GraphqlQueryControls #1467 #1478
  • Remove deprecated options.updateQueries, use options.update instead #1485

• Fixes and Improvements

  • Fixed stack traces on non chrome browsers #1568
  • Fixed bug #1412 where the MockedProvider ignored variables when doing matching. This is potentially breaking because tests could break for which the variables don't match #1501
  • Update all dependencies, scripts' usage, prettier and typescript setup #1402
  • Tests are now linted and verified valid typescript #1402
  • Typescript - updated types for consistency and potential to pass through all types e.g. TProps, TData, TGraphQLVariables #1402
  • Typescript - added ChildDataProps and ChildMutateProps for optional stronger typed usage version of ChildProps #1402
  • Typescript - fix graphql HOC inference #1402
  • Made prettier solely responsible for formatting, removed all formatting linting rules from tslint #1452
  • Convert Query.test to tsx and parameterize types for Query #1462
  • Remove copied shallowEqual code and delegate to fbjs #1465
  • Update rollup configurations, refine package exports #1467
  • Removed unused gzip script #1468
  • Minify umd and ensure umd name consistency #1469
  • Converted test/test-utils/test-utils.test.js to test/test-utils.test.tsx #1475
  • Updates to examples/typescript #1471
  • Mutation test cleanup #1480
  • Removed react-native from the test suite #1451
  • Add client to Query's QueryResult #1488
  • Disregard falsy elements when walking tree in SSR #1495
  • Removed the key variables from the render prop result in the <Query /> #1497
  • Added <Subscription /> component #1483
  • Render callback should be typed with TData #1519
  • Change package to produce ES2015 as module and commonjs for main #1576
  • Improved TypeScript types of Query Component #1581