[Bugfix] Backward message pagination (#385)

Fixed bug in [Message] pagination. The query should be backward to `loadPrevious`. In the previous relay version, this error did not throw but the recent relay version (11.0.2) catches it.

Update `circleci` node version to `14.13.0` for `apollo-upload-client` compatibility.

* Update packages
* Update to new listing rules

.circleci/config.yml

@@ -4,7 +4,7 @@ orbs:
 jobs:
   server:
     docker:
-    - image: circleci/node:14.9.0
+    - image: circleci/node:14.13.0
     - image: circleci/postgres:12.5
       environment:
         POSTGRES_DB: test
@@ -61,7 +61,7 @@ jobs:
   client:
     working_directory: ~/dooboo
     docker:
-      - image: circleci/node:14.9.0
+      - image: circleci/node:14.13.0
     environment:
       TZ: 'Asia/Seoul'
     steps:

client/package.json

@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.1.5",
+    "@emotion/react": "^11.4.0",
     "@expo/match-media": "^0.1.0",
-    "@expo/metro-config": "^0.1.64",
+    "@expo/metro-config": "^0.1.66",
     "@expo/react-native-action-sheet": "^3.9.0",
     "@expo/vector-icons": "^12.0.0",
     "@react-native-async-storage/async-storage": "^1.13.0",
@@ -46,8 +46,8 @@
     "@react-navigation/material-top-tabs": "^6.0.0-next.8",
     "@react-navigation/native": "^6.0.0-next.7",
     "@react-navigation/stack": "^6.0.0-next.15",
-    "apollo-upload-client": "^14.1.3",
-    "date-fns": "^2.21.1",
+    "apollo-upload-client": "^15.0.0",
+    "date-fns": "^2.21.3",
     "dooboo-ui": "^0.0.80",
     "expo": "^41.0.1",
     "expo-ads-admob": "~10.0.4",
@@ -58,10 +58,10 @@
     "expo-crypto": "~9.1.0",
     "expo-device": "~3.2.0",
     "expo-image-manipulator": "~9.1.0",
-    "expo-image-picker": "~10.1.3",
+    "expo-image-picker": "~10.1.4",
     "expo-linear-gradient": "~9.1.0",
     "expo-localization": "~10.1.0",
-    "expo-notifications": "~0.11.5",
+    "expo-notifications": "~0.11.6",
     "expo-random": "~11.1.2",
     "expo-screen-orientation": "~3.1.0",
     "expo-splash-screen": "~0.10.2",
@@ -72,20 +72,20 @@
     "immer": "^9.0.2",
     "mime": "^2.5.2",
     "moment": "^2.29.1",
-    "react": "16.13.1",
+    "react": "^17.0.2",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-modalbox": "^2.0.2",
-    "react-native-pager-view": "^5.1.7",
+    "react-native-pager-view": "5.0.12",
     "react-native-reanimated": "~2.1.0",
     "react-native-redash": "^14.2.4",
     "react-native-safe-area-context": "3.2.0",
     "react-native-scalable-image": "^1.1.0",
     "react-native-screens": "~3.0.0",
     "react-native-svg": "12.1.0",
     "react-native-tab-view": "^3.0.1",
-    "react-native-web": "^0.16.1",
+    "react-native-web": "^0.16.2",
     "react-native-webview": "11.2.3",
     "react-navigation-stack": "^2.10.4",
     "react-relay": "^11.0.2",
@@ -96,17 +96,17 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "7.13.15",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/plugin-proposal-decorators": "7.14.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
-    "@dooboo/eslint-config": "^0.7.0",
+    "@dooboo/eslint-config": "^0.7.2",
     "@emotion/babel-plugin": "^11.3.0",
-    "@expo/webpack-config": "^0.12.68",
+    "@expo/webpack-config": "^0.12.70",
     "@graphql-codegen/cli": "^1.21.4",
     "@graphql-codegen/typescript": "^1.22.0",
     "@graphql-codegen/typescript-document-nodes": "^1.17.11",
@@ -120,44 +120,44 @@
     "@testing-library/react-native": "^8.0.0-rc.0",
     "@types/apollo-upload-client": "^14.1.0",
     "@types/expo": "^33.0.1",
-    "@types/i18n-js": "^3.8.0",
+    "@types/i18n-js": "^3.8.1",
     "@types/jest": "^26.0.23",
     "@types/mime": "^2.0.3",
-    "@types/react": "^17.0.4",
+    "@types/react": "^17.0.5",
     "@types/react-native": "^0.64.2",
     "@types/react-native-modalbox": "^1.4.8",
     "@types/react-relay": "^11.0.1",
     "@types/react-responsive": "^8.0.2",
     "@types/react-test-renderer": "^17.0",
-    "@types/relay-test-utils": "^6.0.3",
+    "@types/relay-test-utils": "^6.0.4",
     "abort-controller": "^3.0.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "babel-plugin-relay": "^11.0.2",
     "babel-preset-expo": "8.3.0",
-    "codecov": "^3.8.1",
-    "eslint": "^7.25.0",
+    "codecov": "^3.8.2",
+    "eslint": "^7.26.0",
     "eslint-plugin-i18n-json": "^3.1.0",
     "get-graphql-schema": "^2.1.2",
     "import-sort-style-eslint": "^6.0.0",
     "jest": "^26.6.3",
     "jest-environment-node": "^26.6.2",
     "jest-expo": "^41.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "jetifier": "^1.6.6",
+    "jetifier": "^2.0.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "prettier-plugin-import-sort": "^0.0.6",
-    "react-dom": "16.13.1",
+    "react-dom": "^17.0.2",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "^16.11.0",
     "relay-compiler": "^11.0.2",
     "relay-compiler-language-typescript": "^14.0.0",
     "relay-config": "^11.0.2",
     "relay-test-utils": "^11.0.2",
     "sharp-cli": "^1.15.0",
-    "ts-jest": "^26.5.5",
+    "ts-jest": "^26.5.6",
     "typescript": "^4.2.4"
   },
   "importSort": {

client/src/App.tsx

@@ -14,11 +14,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  RelayEnvironmentProvider,
-  graphql,
-  useLazyLoadQuery,
-} from 'react-relay/hooks';
+import {RelayEnvironmentProvider, graphql, useLazyLoadQuery} from 'react-relay';
 import {dark, light} from './theme';
 
 import {ActionSheetProvider} from '@expo/react-native-action-sheet';