Switch to React Apollo 3

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 node_js:
 - '10'
 cache: yarn
-dist: xenial
+dist: bionic
 os:
 - linux
 script:

modules/chat/client-react/containers/ChatOperations.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo/index';
+import { graphql } from 'react-apollo';
 import update from 'immutability-helper';
+
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { withUser } from '@gqlapp/user-client-react';
 import settings from '@gqlapp/config';

modules/core/common/index.ts

@@ -6,3 +6,4 @@ export { default as createApolloClient } from './createApolloClient';
 export { default as createReduxStore } from './createReduxStore';
 export * from './createReduxStore';
 export * from './utils';
+export { flowRight as compose } from 'lodash';

modules/counter/client-react/clientCounter/containers/ClientCounter.tsx

@@ -30,13 +30,9 @@ interface CounterProps {
 
 const ClientCounter = ({ t }: CounterProps) => (
   <Query query={COUNTER_QUERY_CLIENT}>
-    {({
-      data: {
-        clientCounter: { amount }
-      }
-    }: any) => {
-      return (
-        <ClientCounterView text={t('text', { amount })}>
+    {({ data, loading }: any) => {
+      return loading ? null : (
+        <ClientCounterView text={t('text', { amount: data.clientCounter.amount })}>
           <IncreaseButton t={t} counterAmount={1} />
         </ClientCounterView>
       );

modules/pagination/client-react/containers/DataProvider.jsx

@@ -16,10 +16,6 @@ const allEdges = generateEdgesArray(47);
 export const useDataProvider = () => {
   const [items, setItems] = useState(null);
 
-  useEffect(() => {
-    loadData(0, 'replace');
-  }, [loadData]);
-
   const loadData = useCallback(
     (offset, dataDelivery) => {
       const newEdges = allEdges.slice(offset, offset + itemsNumber);
@@ -40,6 +36,10 @@ export const useDataProvider = () => {
     [items]
   );
 
+  useEffect(() => {
+    loadData(0, 'replace');
+  });
+
   return { items, loadData };
 };
 

modules/post/client-react/containers/Post.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import update from 'immutability-helper';
 
-import { PLATFORM } from '@gqlapp/core-common';
+import { compose, PLATFORM } from '@gqlapp/core-common';
 import settings from '@gqlapp/config';
 
 import PostList from '../components/PostList';

modules/post/client-react/containers/Post.web.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import update from 'immutability-helper';
 
-import { PLATFORM } from '@gqlapp/core-common';
+import { compose, PLATFORM } from '@gqlapp/core-common';
 import settings from '@gqlapp/config';
 
 import PostList from '../components/PostList';

modules/post/client-react/containers/PostComments.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import update from 'immutability-helper';
 
+import { compose } from '@gqlapp/core-common';
+
 import PostCommentsView from '../components/PostCommentsView';
 
 import POST_QUERY from '../graphql/PostQuery.graphql';

modules/post/client-react/containers/PostComments.web.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import update from 'immutability-helper';
 
+import { compose } from '@gqlapp/core-common';
+
 import PostCommentsView from '../components/PostCommentsView';
 
 import POST_QUERY from '../graphql/PostQuery.graphql';

modules/post/client-react/containers/PostEdit.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 
 import PostEditView from '../components/PostEditView';
 

modules/post/client-react/containers/PostEdit.web.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 
 import PostEditView from '../components/PostEditView';
 

modules/upload/client-react/containers/Upload.native.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
+
 import UploadView from '../components/UploadView';
 import FILES_QUERY from '../graphql/FilesQuery.graphql';
 import UPLOAD_FILES from '../graphql/UploadFiles.graphql';

modules/upload/client-react/containers/Upload.web.jsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
+
 import UploadView from '../components/UploadView';
 import FILES_QUERY from '../graphql/FilesQuery.graphql';
 import UPLOAD_FILES from '../graphql/UploadFiles.graphql';

modules/user/client-react/containers/ForgotPassword.jsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
+
 import ForgotPasswordView from '../components/ForgotPasswordView';
 
 import FORGOT_PASSWORD from '../graphql/ForgotPassword.graphql';

modules/user/client-react/containers/ForgotPassword.native.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
+
 import ForgotPasswordView from '../components/ForgotPasswordView';
 
 import FORGOT_PASSWORD from '../graphql/ForgotPassword.graphql';

modules/user/client-react/containers/Login.native.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose, withApollo } from 'react-apollo';
+import { graphql, withApollo } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
-
 import authentication from '@gqlapp/authentication-client-react';
 
 import LoginView from '../components/LoginView';

modules/user/client-react/containers/Login.web.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose, withApollo } from 'react-apollo';
+import { graphql, withApollo } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
 

modules/user/client-react/containers/Logout.native.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
-import { compose } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { HeaderTitle } from '@gqlapp/look-client-react-native';
 import { translate } from '@gqlapp/i18n-client-react';
 

modules/user/client-react/containers/Profile.jsx

@@ -1,10 +1,8 @@
-// React
 import React from 'react';
+import { graphql } from 'react-apollo';
 
-// Apollo
-import { graphql, compose } from 'react-apollo';
+import { compose } from '@gqlapp/core-common';
 
-// Components
 import ProfileView from '../components/ProfileView';
 
 import CURRENT_USER_QUERY from '../graphql/CurrentUserQuery.graphql';

modules/user/client-react/containers/Register.native.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
 import settings from '@gqlapp/config';

modules/user/client-react/containers/Register.web.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { graphql, compose } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
 import settings from '@gqlapp/config';

modules/user/client-react/containers/ResetPassword.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
-import { translate } from '@gqlapp/i18n-client-react';
+import { graphql } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
+import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
+
 import ResetPasswordView from '../components/ResetPasswordView';
+
 import RESET_PASSWORD from '../graphql/ResetPassword.graphql';
 
 const ResetPassword = props => {

modules/user/client-react/containers/UserAdd.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import { pick } from 'lodash';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
 import settings from '@gqlapp/config';

modules/user/client-react/containers/UserEdit.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
 import { pick } from 'lodash';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { FormError } from '@gqlapp/forms-client-react';
 import settings from '@gqlapp/config';

modules/user/client-react/containers/UserScreenNavigator.native.jsx

@@ -2,7 +2,8 @@ import { createAppContainer, createDrawerNavigator } from 'react-navigation';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { pickBy } from 'lodash';
-import { compose } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 import { DrawerComponent } from '@gqlapp/look-client-react-native';
 
 import { withUser } from './Auth';

modules/user/client-react/containers/Users.native.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import { compose } from 'react-apollo';
+
+import { compose } from '@gqlapp/core-common';
 
 import UsersList from '../components/UsersListView';
 import UsersFilter from '../components/UsersFilterView';

modules/user/client-react/containers/Users.web.jsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Link } from 'react-router-dom';
-import { compose } from 'react-apollo';
 
+import { compose } from '@gqlapp/core-common';
 import { translate } from '@gqlapp/i18n-client-react';
 import { Button, PageLayout } from '@gqlapp/look-client-react';
 import settings from '@gqlapp/config';
@@ -21,7 +21,8 @@ import {
 } from './UserOperations';
 
 const Users = props => {
-  const { t, updateQuery, subscribeToMore, filter } = props;
+  const { t, updateQuery, subscribeToMore } = props;
+  const filter = { isActive: true };
   const usersUpdated = useUsersWithSubscription(subscribeToMore, filter);
 
   useEffect(() => {
@@ -50,9 +51,9 @@ const Users = props => {
         <Button color="primary">{t('users.btn.add')}</Button>
       </Link>
       <hr />
-      <UsersFilterView {...props} />
+      <UsersFilterView {...props} filter={filter} />
       <hr />
-      <UsersListView {...props} />
+      <UsersListView {...props} filter={filter} />
     </PageLayout>
   );
 };

modules/user/client-react/containers/withSubscription.jsx

@@ -8,8 +8,8 @@ export const useUsersWithSubscription = (subscribeToMore, filter) => {
   const [usersUpdated, setUsersUpdated] = useState(null);
 
   useEffect(() => {
-    const subscribe = subscribeToUsers();
-    return () => subscribe();
+    const unsubscribe = subscribeToUsers();
+    return () => unsubscribe();
   });
 
   const subscribeToUsers = () => {

package.json

@@ -155,7 +155,7 @@
     "sass-loader": "^7.1.0",
     "shelljs": "^0.8.1",
     "source-list-map": "^2.0.0",
-    "style-loader": "^0.23.0",
+    "style-loader": "^1.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "ts-loader": "^4.5.0",
@@ -191,7 +191,7 @@
     "hard-source-webpack-plugin": "https://github.com/conorh/hard-source-webpack-plugin",
     "kleur": "^3.0.3",
     "immutability-helper": "2.8.1",
-    "graphql": "14.1.1",
+    "graphql": "14.3.1",
     "iterall": "^1.2.2",
     "upath": "^1.1.0",
     "watchpack": "https://github.com/Globegitter/watchpack"

packages/client-angular/package.json

@@ -62,7 +62,7 @@
     "apollo-link-ws": "^1.0.17",
     "apollo-logger": "^0.3.2",
     "apollo-upload-client": "^10.0.1",
-    "graphql": "^14.1.1",
+    "graphql": "^14.3.1",
     "minilog": "^3.1.0",
     "rxjs": "^6.5.2",
     "subscriptions-transport-ws": "^0.9.4",

packages/client-vue/package.json

@@ -54,7 +54,7 @@
     "error-stack-parser": "^2.0.1",
     "extract-files": "^5.0.0",
     "filesize": "^3.5.11",
-    "graphql": "^14.1.1",
+    "graphql": "^14.3.1",
     "graphql-iso-date": "^3.5.0",
     "graphql-tag": "^2.6.0",
     "history": "^4.7.2",