Apollo Client 2.0 [Beta] #1941

jbaxleyiii · 2017-07-24T20:29:08Z

tldr;

The 2.0 version of Apollo is targeting a more customizable experience with GraphQL. It prioritizes features like custom execution chains (using Apollo Link) and custom stores while providing powerful defaults. It will be an overall minor change to the API so you won't have to change very much code in your current app at all! Apollo ❤️ backwards compat

About

The 2.* version of Apollo Client builds on the original principles of the project. For reference, those goals are:

Incrementally adoptable, so that you can drop it into an existing JavaScript app and start using GraphQL for just part of your UI.
Universally compatible, so that Apollo works with any build setup, any GraphQL server, and any GraphQL schema.
Simple to get started with, you can start loading data right away and learn about advanced features later.
Inspectable and understandable, so that you can have great developer tools to understand exactly what is happening in your app.
Built for interactive apps, so your users can make changes and see them reflected in the UI immediately.
Small and flexible, so you don't get stuff you don't need. The core is under 25kb compressed.
Community driven, Apollo is driven by the community and serves a variety of use cases. Everything is planned and developed in the open.

Based on feedback from a wide variety of users, the 2.* version will double down on being incrementally adoptable and flexible by allowing much stronger extension points. Customization of the client (i.e. data store, execution chain, etc) will be first class in the revised API. The next version will also take steps to reduce the overall size of the default client and provide the foundations for Apollo powering more of the application experience from development to production (i.e. client side state management).

The goal of the 2.0 launch is not to provide all of the new features that have been asked to be built in. Instead, the 2.0 launch makes a few key changes to both management of the code base (lerna / small modules) and the changes necessary to support custom stores and links fully. Apollo Client 2.0 is the jumping off point for user-land driven innovation (custom stores, custom links) and internal refactor (moving query manager into links, breaking apart the store / links into packages, etc)

Details

There are three main tasks for the 2.0 version.

new Store API design and default implementation
deprecate NetworkInterface in favor of Apollo Link
rework repo to allow for smaller packages / easier contributions

Immediate wins

retrying queries on flaky networks
support in place to handle offline interactions
faster default store
ability to build stores for things like mobx, redux, ng-rx, vuex, and more!
smaller bundle size

Contributing

If you are interested in contributing to the 2.0 release that is SO great!! There are a number of ways to help out! Please comment on this PR if you want to do any of the following!

implement any of the main features
test out the 2.0 in your application (in a prerelease version)
write a custom link
write a custom store
help with documentation and upgrade guides (even a codemod maybe!)

Installation instructions

The 2.0 of apollo is split into a few packages. To try it out in your app you can install the following

npm i --save apollo-client@alpha apollo-cache-inmemory@alpha apollo-link

This will give you the replacement for networkInterfaces (links), the current apollo-cache (cache-inmemory) and the new client.

For updating your app, you should only need to change the constructor. For example, a meteor SSR app that looked like this:

import { render } from 'react-dom';
import { onPageLoad } from 'meteor/server-render';

// apollo imports
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

import { App } from '/imports/app';

export const start = () => {
  const client = new ApolloClient({
    networkInterface: createNetworkInterface({ uri: 'http://localhost:3000' }),
    initialState: { apollo: window.__APOLLO_STATE__ },
  });

  const WrappedApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );

  render(WrappedApp, document.getElementById('app'));
};

onPageLoad(start);

Now looks like this:

import { render } from 'react-dom';
import { onPageLoad } from 'meteor/server-render';

// apollo imports
import ApolloClient from 'apollo-client';
import Link from 'apollo-link-http';
import Cache from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo';

import { App } from '/imports/app';

export const start = () => {
  const client = new ApolloClient({
    link: new Link({ uri: 'http://localhost:3000' }),
    cache: new Cache(window.__APOLLO_STATE__),
  });

  // XXX this will have to be updated in react-apollo
  client.initStore = () => {}

  const WrappedApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );

  render(WrappedApp, document.getElementById('app'));
};

onPageLoad(start);

The upgrade path revolves around replacing networkInterface with a link and initial state with a cache.

Happy testing!

mention-bot · 2017-07-24T20:29:09Z

@jbaxleyiii, thanks for your PR! By analyzing the history of the files in this pull request, we identified @kamilkisiela, @stubailo and @michalkvasnicak to be potential reviewers.

apollo-cla · 2017-07-24T20:31:01Z

	Warnings
⚠️	❗ Big PR

	Messages
📖	Please add your name and email to the AUTHORS file (optional)
📖	If this was a change that affects the external API, please update the docs and post a link to the PR in the discussion

Generated by 🚫 dangerJS

jbaxleyiii · 2017-08-11T20:38:45Z

The first alpha is ready for release!

Installation

The 2.0 of apollo is split into a few packages. To try it out in your app you can install the following

npm i --save apollo-client@alpha apollo-cache-inmemory@alpha apollo-link

This will give you the replacement for networkInterfaces (links), the current apollo-cache (cache-inmemory) and the new client.

For updating your app, you should only need to change the constructor. For example, a meteor SSR app that looked like this:

import { render } from 'react-dom';
import { onPageLoad } from 'meteor/server-render';

// apollo imports
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

import { App } from '/imports/app';

export const start = () => {
  const client = new ApolloClient({
    networkInterface: createNetworkInterface({ uri: 'http://localhost:3000' }),
    initialState: { apollo: window.__APOLLO_STATE__ },
  });

  const WrappedApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );

  render(WrappedApp, document.getElementById('app'));
};

onPageLoad(start);

Now looks like this:

import { render } from 'react-dom';
import { onPageLoad } from 'meteor/server-render';

// apollo imports
import ApolloClient from 'apollo-client';
import Link from 'apollo-link-http';
import Cache from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo';

import { App } from '/imports/app';

export const start = () => {
  const client = new ApolloClient({
    link: new Link({ uri: 'http://localhost:3000' }),
    cache: new Cache(window.__APOLLO_STATE__),
  });

  // XXX this will have to be updated in react-apollo
  client.initStore = () => {}

  const WrappedApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );

  render(WrappedApp, document.getElementById('app'));
};

onPageLoad(start);

The upgrade path revolves around replacing networkInterface with a link and initial state with a cache.

Known issues

Currently returning multiple results from links are not supported. Subscriptions should work, as should batching, all other link functionality.

React apollo has not been heavily tested against this release yet. Right off the bat, you will need to add

client.initStore = () => {}

after you create your client because ApolloProvider expects it to exist

Happy testing!

jbaxleyiii · 2017-08-16T13:55:54Z

Fort those interested in what an upgrade will look like so far: https://github.com/jbaxleyiii/ReactNYC-SSR/pull/1/files?diff=split#diff-096103d8490b885f9d5037baea6aea80

ctavan · 2017-08-17T09:14:17Z

@jbaxleyiii thanks for all the work here!

Sorry for hijacking this thread, but I feel that 2.0 would be the opportunity to get rid of the global fetch polyfill: Have you had the chance to further discuss whether removing the polyfill from the default packages is an option for 2.0? See apollographql/apollo-fetch#30

tnrich · 2017-08-17T20:42:09Z

@jbaxleyiii Could you provide more info about this:

Currently returning multiple results from links are not supported.

jbaxleyiii · 2017-08-21T19:35:27Z

@ctavan I have seen it and I do agree! Fetch is removed from all core AC code and I will work to remove it from fetcher as well.

@tnrich one of the super cool things about the 2.0 is support for things like using the @live or @defer directives. These allow you to fire off an initial query, get results, then, at a later point, receive more data for the same query. In order for 2.0 to support this, the internals need to handle this event stream correctly.

benbender · 2017-08-26T14:44:29Z

Another question for the rising star of version 2.0: could it be possible to switch the link on a per query-basis?

Use-cases could be f.e. to have a default-link via WS and use another HTTP-Link for uploading and/or auth-handling via cookie...

With the new interfaces it could be possible, judging by a quick look - or am I on a completly wrong path here?

DxCx · 2017-08-27T22:41:11Z

@benbender you should be able to build any logic with apollo-link split just like http+ws for subscription example

furuholm · 2017-08-28T07:19:10Z

Really looking forward to @defer being supported!

@jbaxleyiii what kind of server support will be required for @defer to work with apollo-client?

DxCx · 2017-08-28T10:31:47Z

hey @furuholm,
i've put up an example repository showing how it can be achieved using graphql-rxjs engine along with apollo's websocket transport.
https://github.com/DxCx/graphql-rxjs-websocket-example

just npm install & start and you can test it over graphiql 🎉

codecov · 2017-09-04T02:20:58Z

Codecov Report

❗ No coverage uploaded for pull request base (master@a70d458). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1941   +/-   ##
=========================================
  Coverage          ?   83.99%           
=========================================
  Files             ?       35           
  Lines             ?     1949           
  Branches          ?      458           
=========================================
  Hits              ?     1637           
  Misses            ?      306           
  Partials          ?        6

Impacted Files	Coverage Δ
packages/apollo-client/src/core/QueryManager.ts	`91.66% <ø> (ø)`
...ckages/apollo-client/src/util/subscribeAndCount.ts	`100% <ø> (ø)`
packages/apollo-client/src/core/ObservableQuery.ts	`90.62% <ø> (ø)`
packages/apollo-client/src/util/wrap.ts	`59.09% <ø> (ø)`
packages/apollo-cache-inmemory/src/index.ts	`100% <ø> (ø)`
packages/apollo-client/src/data/store.ts	`96.61% <ø> (ø)`
packages/apollo-client/src/core/types.ts	`100% <ø> (ø)`
packages/apollo-utilities/src/util/environment.ts	`100% <ø> (ø)`
packages/apollo-utilities/src/util/isEqual.ts	`94.44% <ø> (ø)`
...ackages/apollo-cache-inmemory/src/readFromStore.ts	`92.4% <ø> (ø)`
... and 25 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a70d458...9b0a587. Read the comment docs.

s-panferov · 2017-09-04T19:42:00Z

@jbaxleyiii I'm playing with 2.0.0-alpha.2 version you've released and I cannot find any way to specify customResolvers. Is this feature gone?

stubailo · 2017-09-06T02:10:30Z

@s-panferov it shouldn't be gone, but we might have forgotten to expose it as a public API. Thanks for the feedback!

stubailo · 2017-09-06T02:10:51Z

Looks like James added it here: dbe1639

jbaxleyiii · 2017-09-06T19:18:48Z

@s-panferov I will publish an alpha today with it back in there! I'll comment when its out and how to use it!

stubailo · 2017-09-07T05:13:34Z

packages/apollo-cache-inmemory/src/writeToStore.ts

@@ -190,7 +190,14 @@ export function writeSelectionSetToStore({
            context,
          });
        } else {
-          if (context.fragmentMatcherFunction) {
+          // if this is a defered field we don't need to throw / wanr


some typos in this comment: warn/wanr; also deferred has two rs

jbaxleyiii self-assigned this Jul 24, 2017

nevir mentioned this pull request Aug 2, 2017

Base Architecture convoyinc/apollo-cache-hermes#9

Merged

jbaxleyiii force-pushed the 2.0-alpha branch 3 times, most recently from 87566ec to 4cbea46 Compare August 3, 2017 19:26

stubailo mentioned this pull request Aug 4, 2017

Umbrella issue: Cache invalidation & deletion #621

Closed

ctavan mentioned this pull request Aug 11, 2017

Use fetch-ponyfill instead of isomorphic-fetch apollographql/apollo-fetch#23

Closed

8 tasks

stubailo mentioned this pull request Aug 24, 2017

Add experimental support for @defer, @stream, and @live #1152

Closed

Akryum mentioned this pull request Aug 24, 2017

does vue-apollo work with vuex? vuejs/apollo#7

Closed

jbaxleyiii force-pushed the 2.0-alpha branch from 81942a8 to 780534d Compare September 4, 2017 02:55

jbaxleyiii closed this Sep 4, 2017

jbaxleyiii reopened this Sep 4, 2017

stubailo reviewed Sep 7, 2017

View reviewed changes

jbaxleyiii changed the title ~~[DO NOT MERGE] Apollo Client 2.0~~ [Alpha] Apollo Client 2.0 Sep 12, 2017

cport1 approved these changes Sep 12, 2017

View reviewed changes

jbaxleyiii changed the title ~~[Alpha] Apollo Client 2.0~~ Apollo Client 2.0 [Beta] Sep 13, 2017

jbaxleyiii merged commit 9b0a587 into master Sep 13, 2017

jbaxleyiii force-pushed the master branch from fec6457 to 9b0a587 Compare September 13, 2017 15:52

jbaxleyiii deleted the 2.0-alpha branch September 13, 2017 15:54

DxCx mentioned this pull request Sep 24, 2017

[BREAKING CHANGE]: Cleanup for deprecated API apollographql/subscriptions-transport-ws#272

Merged

4 tasks

github-actions bot locked as resolved and limited conversation to collaborators Feb 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apollo Client 2.0 [Beta] #1941

Apollo Client 2.0 [Beta] #1941

jbaxleyiii commented Jul 24, 2017 •

edited

Loading

mention-bot commented Jul 24, 2017

apollo-cla commented Jul 24, 2017 •

edited

Loading

jbaxleyiii commented Aug 11, 2017 •

edited

Loading

jbaxleyiii commented Aug 16, 2017

ctavan commented Aug 17, 2017

tnrich commented Aug 17, 2017 •

edited

Loading

jbaxleyiii commented Aug 21, 2017

benbender commented Aug 26, 2017

DxCx commented Aug 27, 2017

furuholm commented Aug 28, 2017

DxCx commented Aug 28, 2017

codecov bot commented Sep 4, 2017 •

edited

Loading

s-panferov commented Sep 4, 2017

stubailo commented Sep 6, 2017

stubailo commented Sep 6, 2017

jbaxleyiii commented Sep 6, 2017

stubailo Sep 7, 2017

Apollo Client 2.0 [Beta] #1941

Apollo Client 2.0 [Beta] #1941

Conversation

jbaxleyiii commented Jul 24, 2017 • edited Loading

tldr;

About

Details

Immediate wins

Contributing

Installation instructions

mention-bot commented Jul 24, 2017

apollo-cla commented Jul 24, 2017 • edited Loading

jbaxleyiii commented Aug 11, 2017 • edited Loading

Installation

Known issues

jbaxleyiii commented Aug 16, 2017

ctavan commented Aug 17, 2017

tnrich commented Aug 17, 2017 • edited Loading

jbaxleyiii commented Aug 21, 2017

benbender commented Aug 26, 2017

DxCx commented Aug 27, 2017

furuholm commented Aug 28, 2017

DxCx commented Aug 28, 2017

codecov bot commented Sep 4, 2017 • edited Loading

Codecov Report

s-panferov commented Sep 4, 2017

stubailo commented Sep 6, 2017

stubailo commented Sep 6, 2017

jbaxleyiii commented Sep 6, 2017

stubailo Sep 7, 2017

Choose a reason for hiding this comment

jbaxleyiii commented Jul 24, 2017 •

edited

Loading

apollo-cla commented Jul 24, 2017 •

edited

Loading

jbaxleyiii commented Aug 11, 2017 •

edited

Loading

tnrich commented Aug 17, 2017 •

edited

Loading

codecov bot commented Sep 4, 2017 •

edited

Loading