Merge pull request #277 from apollostack/apollo-0.5

Update to Apollo Client 0.5
apollographql · Oct 18, 2016 · b18ceb4 · b18ceb4
2 parents 070a619 + 8d5c348
commit b18ceb4
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 130 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -4,6 +4,8 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNext
 
+- Full support for both Apollo Client 0.4.21 and 0.5.0. [PR #277](https://github.com/apollostack/react-apollo/pull/277)
+
 ### v0.5.11
 
 - Bug: Fix issue with SSR queries running twice when a mutation wraps a query [#274](https://github.com/apollostack/react-apollo/issue/274)

diff --git a/src/graphql.tsx b/src/graphql.tsx
@@ -5,7 +5,6 @@ import {
 } from 'react';
 
 // modules don't export ES6 modules
-import flatten = require('lodash.flatten');
 import pick = require('lodash.pick');
 import shallowEqual from './shallowEqual';
 
@@ -66,8 +65,18 @@ const defaultMapResultToProps = props => props;
 const defaultMapPropsToSkip = props => false;
 
 // the fields we want to copy over to our data prop
-const observableQueryFields = observable => pick(observable, 'variables',
-  'refetch', 'fetchMore', 'updateQuery', 'startPolling', 'stopPolling');
+function observableQueryFields(observable) {
+  const fields = pick(observable, 'variables',
+    'refetch', 'fetchMore', 'updateQuery', 'startPolling', 'stopPolling');
+
+  Object.keys(fields).forEach((key) => {
+    if (typeof fields[key] === 'function') {
+      fields[key] = fields[key].bind(observable);
+    }
+  });
+
+  return fields;
+}
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -145,13 +154,6 @@ export default function graphql(
 
     const graphQLDisplayName = `Apollo(${getDisplayName(WrappedComponent)})`;
 
-    // XXX: what is up with this? We shouldn't have to do this.
-    function calculateFragments(fragments): FragmentDefinition[] {
-      if (!fragments && !operation.fragments.length) return fragments;
-      if (!fragments) return fragments = flatten([...operation.fragments]);
-      return flatten([...fragments, ...operation.fragments]);
-    }
-
     function calculateOptions(props, newOpts?) {
       let opts = mapPropsToOptions(props);
 
@@ -160,10 +162,6 @@ export default function graphql(
       }
       if (newOpts) opts = assign({}, opts, newOpts);
 
-      if (opts.fragments) {
-        opts.fragments = calculateFragments(opts.fragments);
-      }
-
       if (opts.variables || !operation.variables.length) return opts;
 
       let variables = {};
@@ -375,9 +373,14 @@ export default function graphql(
         // We've subscribed already, just update with our new options and
         // take the latest result
         if (this.querySubscription) {
-          // Since we don't care about the result, use a hacky version to
-          // work around https://github.com/apollostack/apollo-client/pull/694
-          this.queryObservable._setOptionsNoResult(opts);
+          if (this.queryObservable._setOptionsNoResult) {
+            // Since we don't care about the result, use a hacky version to
+            // work around https://github.com/apollostack/apollo-client/pull/694
+            // This workaround is only present in Apollo Client 0.4.21
+            this.queryObservable._setOptionsNoResult(opts);
+          } else {
+            this.queryObservable.setOptions(opts);
+          }
 
           // Ensure we are up-to-date with the latest state of the world
           assign(this.data,

diff --git a/test/react-native/component.test.js b/test/react-native/component.test.js
@@ -21,7 +21,7 @@ describe('App', () => {
     const query = gql`query people { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: { name: 'Luke Skywalker' } } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     const ContainerWithData = graphql(query)(({ data }) => {
       if (data.loading) return <Text>Loading...</Text>;
@@ -38,7 +38,7 @@ describe('App', () => {
     const query = gql`query people { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: { name: 'Luke Skywalker' } } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     class Container extends Component {
       componentWillReceiveProps(props) {

diff --git a/test/react-web/client/graphql/fragments.test.tsx b/test/react-web/client/graphql/fragments.test.tsx
@@ -24,7 +24,7 @@ describe('fragments', () => {
     `;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     try {
       @graphql(query)
@@ -48,12 +48,13 @@ describe('fragments', () => {
 
   it('correctly fetches a query with inline fragments', (done) => {
     const query = gql`
-      query people { allPeople(first: 1) { ...person } }
+      query people { allPeople(first: 1) { __typename ...person } }
       fragment person on PeopleConnection { people { name } }
     `;
-    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const data = { allPeople: {
+      __typename: 'PeopleConnection', people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -75,8 +76,14 @@ describe('fragments', () => {
   it('correctly merges a query with inline fragments and passed fragments', (done) => {
     const query = gql`
       query peopleAndShips {
-        allPeople(first: 1) { ...Person }
-        allShips(first: 1) { ...ships }
+        allPeople(first: 1) {
+          __typename
+          ...Person
+        }
+        allShips(first: 1) {
+          __typename
+          ...ships
+        }
       }
       fragment Person on PeopleConnection { people { name } }
     `;
@@ -86,24 +93,30 @@ describe('fragments', () => {
 
     const mockedQuery = gql`
       query peopleAndShips {
-        allPeople(first: 1) { ...Person }
-        allShips(first: 1) { ...ships }
+        allPeople(first: 1) {
+          __typename
+          ...Person
+        }
+        allShips(first: 1) {
+          __typename
+          ...ships
+        }
       }
       fragment Person on PeopleConnection { people { name } }
       fragment ships on ShipsConnection { starships { name } }
     `;
 
     const data = {
-      allPeople: { people: [ { name: 'Luke Skywalker' } ] },
-      allShips: { starships: [ { name: 'CR90 corvette' } ] },
+      allPeople: { __typename: 'PeopleConnection', people: [ { name: 'Luke Skywalker' } ] },
+      allShips: { __typename: 'ShipsConnection', starships: [ { name: 'CR90 corvette' } ] },
     };
     const networkInterface = mockNetworkInterface(
       { request: { query: mockedQuery }, result: { data } }
     );
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query, {
-      options: () => ({ fragments: [shipFragment]})
+      options: () => ({ fragments: shipFragment }),
     })
     class Container extends React.Component<any, any> {
       componentWillReceiveProps(props) {
@@ -124,27 +137,27 @@ describe('fragments', () => {
 
   it('correctly allows for passed fragments', (done) => {
     const query = gql`
-      query ships { allShips(first: 1) { ...Ships } }
+      query ships { allShips(first: 1) { __typename ...Ships } }
     `;
     const shipFragment = createFragment(gql`
       fragment Ships on ShipsConnection { starships { name } }
     `);
 
     const mockedQuery = gql`
-      query ships { allShips(first: 1) { ...Ships } }
+      query ships { allShips(first: 1) { __typename ...Ships } }
       fragment Ships on ShipsConnection { starships { name } }
     `;
 
     const data = {
-      allShips: { starships: [ { name: 'CR90 corvette' } ] },
+      allShips: { __typename: 'ShipsConnection', starships: [ { name: 'CR90 corvette' } ] },
     };
     const networkInterface = mockNetworkInterface(
       { request: { query: mockedQuery }, result: { data } }
     );
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query, {
-      options: () => ({ fragments: [shipFragment]}),
+      options: () => ({ fragments: shipFragment}),
     })
     class Container extends React.Component<any, any> {
       componentWillReceiveProps(props) {

diff --git a/test/react-web/client/graphql/mutations.test.tsx b/test/react-web/client/graphql/mutations.test.tsx
@@ -22,7 +22,7 @@ describe('mutations', () => {
     const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     const ContainerWithData =  graphql(query)(({ mutate }) => {
       expect(mutate).toBeTruthy();
@@ -37,7 +37,7 @@ describe('mutations', () => {
     const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     const props = ({ ownProps, addPerson }) => ({
       [ownProps.methodName]: (name: string) => addPerson({ variables: { name }}),
@@ -56,7 +56,7 @@ describe('mutations', () => {
     const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
     let bar;
     const ContainerWithData =  graphql(query)(() => {
       bar(); // this will throw
@@ -76,7 +76,7 @@ describe('mutations', () => {
     const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -108,7 +108,7 @@ describe('mutations', () => {
       request: { query, variables },
       result: { data },
     });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -140,7 +140,7 @@ describe('mutations', () => {
       request: { query, variables },
       result: { data },
     });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -172,7 +172,7 @@ describe('mutations', () => {
       request: { query, variables },
       result: { data },
     });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
     const Container =  graphql(query)(() => null);
 
     try {
@@ -187,7 +187,7 @@ describe('mutations', () => {
     const query = gql`mutation addPerson { allPeople(first: 1) { people { name } } }`;
     const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     function options(props) {
       expect(props.listId).toBe(2);
@@ -231,7 +231,7 @@ describe('mutations', () => {
       request: { query, variables },
       result: { data },
     });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -270,7 +270,7 @@ describe('mutations', () => {
     };
 
     const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     @graphql(query)
     class Container extends React.Component<any, any> {
@@ -360,7 +360,7 @@ describe('mutations', () => {
       { request: { query, variables: { id: '123' } }, result: { data } },
       { request: { query: mutation }, result: { data: mutationData } }
     );
-    const client = new ApolloClient({ networkInterface });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
 
     let count = 0;
     @graphql(query)