2.2.2

2.2.2 (September 28, 2018)

• When using React.createContext and SSR, we now make sure the context
  provider value is reset to the previous value it had after its children are
  walked.
  @mitchellhamilton in #2304
• Revert:
  When a query failed on the first result, the query result data was being
  returned as undefined. This behavior has been changed so that data is
  returned as an empty object. This makes checking for data (e.g.
  instead of data && data.user you can just check data.user) and
  destructring (e.g. { data: { user } }) easier. Note: this could
  potentially hurt applications that are relying on a falsey check of data
  to see if any query errors have occurred. A better (and supported) way to
  check for errors is to use the result errors property.
  #1983

2.2.1

2.2.1 (September 26, 2018)

• Revert: "Typescript: use Partial<TData> instead of TData | {}, for the
  QueryResult data property."

2.2.0

2.2.0 (September 26, 2018)

New Functionality

• The <Subscription /> component now allows the registration of a callback
  function, that will be triggered each time the component receives data. The
  callback options object param consists of the current Apollo Client
  instance in client, and the received subscription data in
  subscriptionData.
  @jedwards1211 in #1966
• The graphql options object is no longer mutated, when calculating
  variables from props. This now prevents an issue where components created
  with graphql were not having their query variables updated properly, when
  props changed.
  @ksmth in #1968
• When a query failed on the first result, the query result data was being
  returned as undefined. This behavior has been changed so that data is
  returned as an empty object. This makes checking for data (e.g.
  instead of data && data.user you can just check data.user) and
  destructring (e.g. { data: { user } }) easier. Note: this could
  potentially hurt applications that are relying on a falsey check of data
  to see if any query errors have occurred. A better (and supported) way to
  check for errors is to use the result errors property.
  @TLadd in #1983
• Avoid importing lodash directly.
  @shahyar in #2045
• Make sure <Subscription />, <Query /> & <Mutation /> all support
  using an Apollo Client instance configured in the context or via
  props.
  @quentin- in #1956
• Adjust <Query /> onCompleted and onError callbacks to be triggered
  via the componentDidUpdate lifecycle method. This ensures these callbacks
  can be used when data is fetched over the network, and when data is
  fetched from the local store (previsouly these callbacks were only being
  triggered when data was fetched over the network).
  @olistic in #2190
• Import lodash/flowRight using ES import to allow for treeshaking.
  @Pajn in #2332
• Added a new partialRefetch prop (false by default).
  When a Query component is mounted, and a mutation is executed
  that returns the same ID as the mounted Query, but has less
  fields in its result, Apollo Client's QueryManager returns the
  data as an empty Object since a hit can't be found in the cache.
  This can lead to application errors when the UI elements rendered by
  the original Query component are expecting certain data values to
  exist, and they're all of a sudden stripped away. The recommended way to
  handle this is to use the mutations update prop to reconcile the mutation
  result with the data in the cache, getting everything into the expected
  state. This can definitely be a cumbersome process however, so to help
  address this the partialRefetch prop can be used to automatically
  refetch the original query and update the cache.
  @steelbrain in #2003

Bug Fixes

• When the Query skip prop is set to true, make sure the render prop
  loading param is set to false, since we're not actually loading
  anything.
  @edorivai in #1916
• Fixed a regression where variables passed in graphql HOC options were
  not merged with mutation variables.
  @samginn in #2216

Testing

• Added an example app that shows how to test mutations.
  @excitement-engineer in #1998
• Allow a custom cache object to be passed into the test-utils
  MockedProvider.
  @palmfjord in #2254
• Make the MockedProvider mocks prop read only.
  @amacleay in #2284

Typescript

• Improved TypeScript Typings:
  Deprecated MutationFunc in favor of MutationFn.
  Added missing onCompleted and onError callbacks to MutationOpts.
  @danilobuerger in #2322
• Remove duplicate FetchMoreOptions and FetchMoreQueryOptions types, and
  instead import them from Apollo Client.
  @skovy in #2281
• Type changes for the graphql HOC options.skip property.
  @jameslaneconkling in #2208
• Typescript: use Partial<TData> instead of TData | {}, for the
  QueryResult data property.
  @tgriesser in #2313

Infrastructure

• No longer building against Node 9
  @hwillson in #2404

Final 2.1 beta!

2.1.0-beta.3

• Refactored and removed old graphql implementation in favor of new components
• Removed QueryRecycler!! :yay:
• Added query, mutation, and subscription higher order components
• Aded <Subscription /> to the public API
• Added prop-types validation to the <Query />, <Subscription /> and <ApolloConsumer /> component #1587
• Added <Mutation /> component #1520
• HoC props result-mapping function now receives prior return value as second argument.
• Fix errorPolicy when 'all' not passing data and errors
• Fix bundles and run test suite on all shippable code

Note Formal docs coming soon!

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...

2.1.0 Alpha 2

• Change package to produce ES2015 as module and commonjs for main #1576
• Make Query component work with getDataFromTree by defining fetchData [#1579]
• Added back in support for browser / main bundles #1578

2.1.0-alpha.1

Fixes some bundling troubles with the first alpha and adds SSR support for Query!

Changelog

• Change package to produce ES2015 as module and commonjs for main #1576
• Make Query component work with getDataFromTree by defining fetchData [#1579]
• Added back in support for browser / main bundles #1578

2.1.0 Alpha :tada:

This alpha 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...

Edge case bugs and testing improvements

1.4.15

• Fix: handle calling refetch in child componentDidMount
• Fix: ensure options gets up to date props #1025
• Fix: ensure queryRecycler exists before using it
• MockNetworkInterface match mock requests regardless of variable order #973
• Allow to pass removeTypenames to MockedProvider #1001

[BROKEN] Typescript export

This build was broken from some reason? So 1.4.6 has these features

1.4.5

• Fix: export all types from main type file