Merge pull request #327 from cofacts/rollback-apollo

Rollback apollo-client to 2.X
cofacts · Sep 3, 2020 · b047152 · b047152
2 parents ddf23aa + 40b8618
commit b047152
Show file tree

Hide file tree

Showing 41 changed files with 402 additions and 176 deletions.
diff --git a/components/AppLayout/AppHeader.js b/components/AppLayout/AppHeader.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
 import { c, t } from 'ttag';
 
 import {
@@ -31,6 +31,7 @@ import { NAVBAR_HEIGHT, TABS_HEIGHT } from 'constants/size';
 import { EDITOR_FACEBOOK_GROUP } from 'constants/urls';
 import desktopLogo from './images/logo-desktop.svg';
 import mobileLogo from './images/logo-mobile.svg';
+import { useQuery } from '@apollo/react-hooks';
 
 const MENU_BUTTON_WIDTH = 48;
 

diff --git a/components/AppLayout/AppLayout.js b/components/AppLayout/AppLayout.js
@@ -1,12 +1,13 @@
 import React, { Fragment, useState, useEffect, useCallback } from 'react';
-import { gql, useLazyQuery } from '@apollo/client';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
 import Router from 'next/router';
 import { pushToDataLayer } from 'lib/gtm';
 import AppHeader from './AppHeader';
 import AppSidebar from './AppSidebar';
 import AppFooter from './AppFooter';
+import gql from 'graphql-tag';
+import { useLazyQuery } from '@apollo/react-hooks';
 import LoginModal from './LoginModal';
 import fetchAPI from 'lib/fetchAPI';
 

diff --git a/components/AppLayout/UserName.js b/components/AppLayout/UserName.js
@@ -1,7 +1,8 @@
 // @todo: remove this. this components is deprecated and will be replaced by new UI components
 import React, { PureComponent, useState, useCallback, useEffect } from 'react';
 import { t } from 'ttag';
-import { gql, useLazyQuery, useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useLazyQuery, useMutation } from '@apollo/react-hooks';
 import Link from 'next/link';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';

diff --git a/components/AppLayout/Widgets/Avatar.js b/components/AppLayout/Widgets/Avatar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import cx from 'clsx';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { Badge } from '@material-ui/core';

diff --git a/components/ArticleCategories/AddCategoryDialog.js b/components/ArticleCategories/AddCategoryDialog.js
@@ -1,5 +1,5 @@
 import { t } from 'ttag';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
 import useCurrentUser from 'lib/useCurrentUser';
 

diff --git a/components/ArticleCategories/ArticleCategories.js b/components/ArticleCategories/ArticleCategories.js
@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
 import getConfig from 'next/config';
 import { t } from 'ttag';
+import { useQuery } from '@apollo/react-hooks';
 import { Box, Chip } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
@@ -54,7 +55,7 @@ function ArticleCategories({ articleId, articleCategories }) {
     {}
   );
 
-  const allCategories = (data?.ListCategories?.edges || []).map(
+  const allCategories = (data.ListCategories?.edges || []).map(
     ({ node }) => node
   );
   const hasOtherCategories = allCategories.some(({ id }) => !isInArticle[id]);

diff --git a/components/ArticleCategories/ArticleCategory.js b/components/ArticleCategories/ArticleCategory.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import Chip from '@material-ui/core/Chip';
 
 import { makeStyles } from '@material-ui/core/styles';

diff --git a/components/ArticleCategories/CategoryOption.js b/components/ArticleCategories/CategoryOption.js
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { t } from 'ttag';
-import { gql, useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
 import Link from 'next/link';
+import { useMutation } from '@apollo/react-hooks';
 import {
   Box,
   Chip,

diff --git a/components/ArticleCategories/DownVoteDialog.js b/components/ArticleCategories/DownVoteDialog.js
@@ -1,5 +1,6 @@
 import { t } from 'ttag';
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
 
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';

diff --git a/components/ArticleInfo.js b/components/ArticleInfo.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t, ngettext, msgid } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import { TYPE_ICON } from 'constants/replyType';

diff --git a/components/ArticlePageLayout.js b/components/ArticlePageLayout.js
@@ -1,6 +1,7 @@
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t, jt } from 'ttag';
 import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/react-hooks';
 
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';

diff --git a/components/ArticleReply/index.js b/components/ArticleReply/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { t, jt } from 'ttag';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { Box, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 

diff --git a/components/ArticleReplyFeedbackControl/ArticleReplyFeedbackControl.js b/components/ArticleReplyFeedbackControl/ArticleReplyFeedbackControl.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { t } from 'ttag';
-import { gql, useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useMutation } from '@apollo/react-hooks';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { Tabs, Tab, Box, Popover, Typography } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';

diff --git a/components/ArticleReplyFeedbackControl/ArticleReplyFeedbackControl.stories.js b/components/ArticleReplyFeedbackControl/ArticleReplyFeedbackControl.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MockedProvider } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/react-testing';
 import ArticleReplyFeedbackControl from './';
 import { CREATE_REPLY_FEEDBACK } from './ArticleReplyFeedbackControl';
 import { USER_QUERY } from 'lib/useCurrentUser';

diff --git a/components/ArticleReplyFeedbackControl/ButtonGroupDisplay.js b/components/ArticleReplyFeedbackControl/ButtonGroupDisplay.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { t } from 'ttag';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { makeStyles } from '@material-ui/core/styles';
 import { ButtonGroup, Button } from '@material-ui/core';
 import useCurrentUser from 'lib/useCurrentUser';

diff --git a/components/CreateReplyRequestForm/CreateReplyRequestForm.js b/components/CreateReplyRequestForm/CreateReplyRequestForm.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { t } from 'ttag';
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/react-hooks';
 import {
   ButtonGroup,
   Button,
@@ -10,6 +10,7 @@ import {
   MenuItem,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import gql from 'graphql-tag';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
 import Hint from 'components/NewReplySection/ReplyForm/Hint';
 import useCurrentUser from 'lib/useCurrentUser';

diff --git a/components/CurrentReplies.js b/components/CurrentReplies.js
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
-import { gql, useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t, jt, ngettext, msgid } from 'ttag';
+import { useMutation } from '@apollo/react-hooks';
 
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';

diff --git a/components/Feedback.js b/components/Feedback.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
 import { Box } from '@material-ui/core';

diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js
@@ -1,6 +1,7 @@
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
 import { Box, SvgIcon, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { useQuery } from '@apollo/react-hooks';
 
 const useStyles = makeStyles(theme => ({
   root: {

diff --git a/components/ListPageControls/CategoryFilter.js b/components/ListPageControls/CategoryFilter.js
@@ -1,7 +1,8 @@
 import { memo } from 'react';
 import { useRouter } from 'next/router';
 import { t } from 'ttag';
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
 
 import { goToUrlQueryAndResetPagination } from 'lib/listPage';
 import BaseFilter from './BaseFilter';

diff --git a/components/ListPageDisplays/ArticleItem.js b/components/ListPageDisplays/ArticleItem.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import Link from 'next/link';
 import { c, t } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';

diff --git a/components/ListPageDisplays/ReplyItem.js b/components/ListPageDisplays/ReplyItem.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t } from 'ttag';
 import { TYPE_NAME } from 'constants/replyType';
 import Avatar from 'components/AppLayout/Widgets/Avatar';

diff --git a/components/ListPageDisplays/ReplySearchItem.js b/components/ListPageDisplays/ReplySearchItem.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t, msgid, ngettext } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import {

diff --git a/components/NewReplySection/ReplySearch/ReplySearch.js b/components/NewReplySection/ReplySearch/ReplySearch.js
@@ -1,5 +1,6 @@
 import { useEffect, useContext } from 'react';
-import { gql, useLazyQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 import { t } from 'ttag';
 
 import getDedupedArticleReplies from 'lib/getDedupedArticleReplies';

diff --git a/components/NewReplySection/index.js b/components/NewReplySection/index.js
@@ -1,5 +1,6 @@
 import { useCallback, useContext } from 'react';
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 import { t } from 'ttag';
 
 import { Box } from '@material-ui/core';

diff --git a/components/RelatedReplies.js b/components/RelatedReplies.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { t } from 'ttag';
 import { Box, SvgIcon, Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { gql } from '@apollo/client';
-import Link from 'next/link';
+import gql from 'graphql-tag';
 
 import { TYPE_NAME, TYPE_DESC } from 'constants/replyType';
+import ExpandableText from './ExpandableText';
 import { linkify, nl2br } from 'lib/text';
+import Link from 'next/link';
 import PlainList from 'components/PlainList';
-import ExpandableText from './ExpandableText';
 
 const useStyles = makeStyles(theme => ({
   root: {

diff --git a/components/ReplyInfo.js b/components/ReplyInfo.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t, ngettext, msgid } from 'ttag';
 import Link from 'next/link';
 import Infos, { TimeInfo } from './Infos';

diff --git a/components/ReplyRequestReason/ReplyRequestReason.js b/components/ReplyRequestReason/ReplyRequestReason.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/react-hooks';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, SvgIcon, Divider } from '@material-ui/core';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 import cx from 'clsx';
 

diff --git a/components/ReplySearchPageLayout.js b/components/ReplySearchPageLayout.js
@@ -1,6 +1,7 @@
-import { gql, useQuery } from '@apollo/client';
+import gql from 'graphql-tag';
 import { t } from 'ttag';
 import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/react-hooks';
 
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';

diff --git a/components/UsedArticleItem.js b/components/UsedArticleItem.js
@@ -1,6 +1,6 @@
 import { t, jt } from 'ttag';
 import Link from 'next/link';
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 import isValid from 'date-fns/isValid';
 import { format, formatDistanceToNow } from 'lib/dateWithLocale';
 import EditorName from 'components/EditorName';

diff --git a/lib/apollo.js b/lib/apollo.js
@@ -1,12 +1,8 @@
-import {
-  InMemoryCache,
-  defaultDataIdFromObject,
-  ApolloLink,
-  ApolloClient,
-} from '@apollo/client';
-import { withApollo } from 'next-apollo';
-import { BatchHttpLink } from '@apollo/client/link/batch-http';
-import { onError } from '@apollo/client/link/error';
+import { withData } from 'next-apollo';
+import { ApolloLink } from 'apollo-link';
+import { BatchHttpLink } from 'apollo-link-batch-http';
+import { onError } from 'apollo-link-error';
+import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import getConfig from 'next/config';
 import { t } from 'ttag';
 import { headers } from './fetchAPI';
@@ -32,38 +28,28 @@ export function dataIdFromObject(object) {
   }
 }
 
-/**
- * ApolloClient factory function
- * @param {object} options - additional options when creating ApolloClient instance
- * @returns {ApolloClient} a brand new instance of ApolloClient
- */
-export function createApolloClient(options = {}) {
-  return new ApolloClient({
-    link: ApolloLink.from([
-      onError(errors => {
-        console.error('[apollo-link-error]', errors);
-        if (
-          typeof alert !== 'undefined' &&
-          errors.graphQLErrors &&
-          errors.graphQLErrors.length === 1 &&
-          errors.graphQLErrors[0].message === AUTH_ERROR_MSG
-        ) {
-          alert(t`Please login first.`);
-        }
-      }),
-      new BatchHttpLink({
-        uri: `${PUBLIC_API_URL}/graphql`, // Server URL (must be absolute)
-        headers,
-        credentials: 'include', // Additional fetch() options like `credentials` or `headers`
-      }),
-    ]),
-    cache: new InMemoryCache({ dataIdFromObject }),
-    ...options,
-  });
-}
+export const config = {
+  link: ApolloLink.from([
+    onError(errors => {
+      console.error('[apollo-link-error]', errors);
+      if (
+        typeof alert !== 'undefined' &&
+        errors.graphQLErrors &&
+        errors.graphQLErrors.length === 1 &&
+        errors.graphQLErrors[0].message === AUTH_ERROR_MSG
+      ) {
+        alert(t`Please login first.`);
+      }
+    }),
+    new BatchHttpLink({
+      uri: `${PUBLIC_API_URL}/graphql`, // Server URL (must be absolute)
+      headers,
+      credentials: 'include', // Additional fetch() options like `credentials` or `headers`
+    }),
+  ]),
+  createCache() {
+    return new InMemoryCache({ dataIdFromObject });
+  },
+};
 
-export default withApollo(
-  createApolloClient({
-    name: 'rumors-site',
-  })
-);
+export default withData(config);
diff --git a/lib/useCurrentUser.js b/lib/useCurrentUser.js
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { gql, useLazyQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 import { pushToDataLayer } from './gtm';
 
 export const CurrentUser = gql`