chore: Support Relay v6.x (#395)

README.md

@@ -15,7 +15,7 @@
   - [Route configuration](#route-configuration)
     - [`query` or `getQuery`](#query-or-getquery)
     - [`cacheConfig` or `getCacheConfig`](#cacheconfig-or-getcacheconfig)
-    - [`dataFrom`](#datafrom)
+    - [`fetchPolicy`](#fetchpolicy)
     - [`prepareVariables`](#preparevariables)
     - [`render`](#render)
 
@@ -133,7 +133,7 @@ Route configuration works similarly to that in Found, but instead of `data` or `
 
 - `query` or `getQuery`: the Relay query for the route, or a method that returns the Relay query for the route
 - `cacheConfig` or `getCacheConfig`: the cache configuration for the route, or a method that returns the cache configuration for the route
-- `dataFrom` or `getDataFrom`: the source of the Relay data for the route, or a method that returns the source of the Relay data for the route; `NETWORK_ONLY` (the default), `STORE_THEN_NETWORK`, or `STORE_OR_NETWORK`
+- `fetchPolicy` or `getFetchPolicy`: the fetch policy for the Relay data for the route, or a method that returns the fetch policy for the Relay data for the route; `network-only` (the default), `store-and-network`, or `store-or-network`
 - `prepareVariables`: a method to apply additional transformations to the route variables
 - `render`: as on Found, a method that returns the element for the route, but with additional properties
 
@@ -151,9 +151,9 @@ As with `<QueryRenderer>`, upon routing, the route will not refetch its data if
 
 As on `<QueryRenderer>`, this value will be forwarded directly to the network layer.
 
-#### `dataFrom`
+#### `fetchPolicy`
 
-As on `<QueryRenderer>`, this controls the data source for the route. In addition to `NETWORK_ONLY` and `STORE_THEN_NETWORK` as on `<QueryRenderer>`, this can also take the value `STORE_OR_NETWORK`, which bypasses the network fetch entirely when the data are available in the store.
+As on `<QueryRenderer>`, this controls the fetch policy for data for the route. In addition to `network-only` and `store-and-network` as on `<QueryRenderer>`, this can also take the value `store-or-network`, which bypasses the network fetch entirely when the data are available in the store.
 
 #### `prepareVariables`
 

package.json

@@ -33,7 +33,7 @@
       "prettier --write",
       "git add"
     ],
-    "/README.md": [
+    "./README.md": [
       "doctoc",
       "git add"
     ]
@@ -69,55 +69,53 @@
   },
   "homepage": "https://github.com/relay-tools/found-relay#readme",
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.5.5",
+    "@babel/runtime-corejs3": "^7.6.0",
     "is-promise": "^2.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
     "found": ">=0.3.21",
-    "react": ">=16.5.0",
-    "react-relay": ">=2.0.0"
+    "react": ">=16.9.0",
+    "react-relay": ">=6.0.0",
+    "relay-runtime": ">=6.0.0"
   },
   "devDependencies": {
     "@4c/babel-preset": "^7.0.0",
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/node": "^7.5.5",
-    "babel-jest": "^24.8.0",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/node": "^7.6.1",
+    "babel-jest": "^24.9.0",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "babel-plugin-relay": "^5.0.0",
+    "babel-plugin-relay": "^6.0.0",
     "codecov": "^3.5.0",
     "delay": "^4.3.0",
     "doctoc": "^1.4.0",
-    "eslint": "^6.1.0",
-    "eslint-config-4catalyzer-jest": "^2.0.0",
+    "eslint": "^6.4.0",
+    "eslint-config-4catalyzer-jest": "^2.0.1",
     "eslint-config-4catalyzer-react": "^1.0.0",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.15.1",
+    "eslint-plugin-jest": "^22.17.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
     "farce": "^0.2.8",
     "found": "^0.4.7",
-    "graphql": "^14.4.2",
-    "husky": "^3.0.3",
-    "jest": "^24.8.0",
-    "lint-staged": "^9.2.1",
+    "graphql": "^14.5.6",
+    "husky": "^3.0.5",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.2.5",
     "p-defer": "^3.0.0",
     "prettier": "^1.18.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-relay": "^5.0.0",
-    "relay-compiler": "^5.0.0",
+    "react-relay": "^6.0.0",
+    "relay-compiler": "^6.0.0",
     "relay-local-schema": "^0.8.0",
-    "relay-runtime": "^5.0.0",
+    "relay-runtime": "^6.0.0",
     "rimraf": "^3.0.0"
-  },
-  "resolutions": {
-    "relay-compiler/core-js": "2.6.9"
   }
 }

src/QuerySubscription.js

@@ -1,15 +1,12 @@
+import { createOperationDescriptor, getRequest } from 'relay-runtime';
+
 export default class QuerySubscription {
-  constructor({ environment, query, variables, cacheConfig, dataFrom }) {
+  constructor({ environment, query, variables, cacheConfig, fetchPolicy }) {
     this.environment = environment;
     this.query = query;
     this.variables = variables;
     this.cacheConfig = cacheConfig;
-    this.dataFrom = dataFrom;
-
-    const {
-      createOperationDescriptor,
-      getRequest,
-    } = this.environment.unstable_internal;
+    this.fetchPolicy = fetchPolicy;
 
     this.operation = createOperationDescriptor(getRequest(query), variables);
 
@@ -31,7 +28,7 @@ export default class QuerySubscription {
 
     this.relayContext = {
       environment: this.environment,
-      variables: this.operation.variables,
+      variables: this.operation.request.variables,
     };
   }
 
@@ -82,11 +79,11 @@ export default class QuerySubscription {
 
     const useStoreSnapshot =
       !this.retrying &&
-      (this.dataFrom === 'STORE_THEN_NETWORK' ||
-        this.dataFrom === 'STORE_OR_NETWORK') &&
+      (this.fetchPolicy === 'store-and-network' ||
+        this.fetchPolicy === 'store-or-network') &&
       this.environment.check(this.operation.root);
 
-    if (!(this.dataFrom === 'STORE_OR_NETWORK' && useStoreSnapshot)) {
+    if (!(this.fetchPolicy === 'store-or-network' && useStoreSnapshot)) {
       try {
         this.pendingRequest = this.environment
           .execute({

src/Resolver.js

@@ -9,6 +9,7 @@ import {
 import isPromise from 'is-promise';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
+import warning from 'warning';
 
 import QuerySubscription from './QuerySubscription';
 import ReadyStateRenderer from './ReadyStateRenderer';
@@ -35,18 +36,27 @@ export default class Resolver {
       route => route.getCacheConfig,
       route => route.cacheConfig,
     );
-    const dataFroms = getRouteValues(
+    const fetchPolicies = getRouteValues(
       routeMatches,
-      route => route.getDataFrom,
-      route => route.dataFrom,
+      route => route.getFetchPolicy,
+      route => route.fetchPolicy,
+    );
+
+    warning(
+      !routeMatches.some(({ route }) => route.dataFrom),
+      '`dataFrom` on routes no longer has any effect; use `fetchPolicy` instead.',
+    );
+    warning(
+      !routeMatches.some(({ route }) => route.getDataFrom),
+      '`getDataFrom` on routes no longer has any effect; use `getFetchPolicy` instead.',
     );
 
     const routeVariables = this.getRouteVariables(match, routeMatches);
     const querySubscriptions = this.updateQuerySubscriptions(
       queries,
       routeVariables,
       cacheConfigs,
-      dataFroms,
+      fetchPolicies,
     );
 
     const fetches = querySubscriptions.map(
@@ -105,7 +115,12 @@ export default class Resolver {
     );
   }
 
-  updateQuerySubscriptions(queries, routeVariables, cacheConfigs, dataFroms) {
+  updateQuerySubscriptions(
+    queries,
+    routeVariables,
+    cacheConfigs,
+    fetchPolicies,
+  ) {
     const querySubscriptions = queries.map((query, i) => {
       if (!query) {
         return null;
@@ -129,7 +144,7 @@ export default class Resolver {
         query,
         variables,
         cacheConfig: cacheConfigs[i],
-        dataFrom: dataFroms[i],
+        fetchPolicy: fetchPolicies[i],
       });
     });
 

test/Resolver.test.js

@@ -1,7 +1,6 @@
 import queryMiddleware from 'farce/lib/queryMiddleware';
 import ServerProtocol from 'farce/lib/ServerProtocol';
 import createFarceRouter from 'found/lib/createFarceRouter';
-import createRender from 'found/lib/createRender';
 import makeRouteConfig from 'found/lib/makeRouteConfig';
 import Route from 'found/lib/Route';
 import React from 'react';
@@ -132,8 +131,6 @@ describe('Resolver', () => {
         historyProtocol: new ServerProtocol('/parent/bar?name=baz'),
         historyMiddlewares: [queryMiddleware],
         routeConfig: routes,
-
-        render: createRender({}),
       });
 
       const resolver = new InstrumentedResolver(environment);

test/error.test.js

@@ -1,6 +1,5 @@
 import ServerProtocol from 'farce/lib/ServerProtocol';
 import createFarceRouter from 'found/lib/createFarceRouter';
-import createRender from 'found/lib/createRender';
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import { graphql } from 'react-relay';
@@ -41,8 +40,6 @@ describe('error', () => {
           render,
         },
       ],
-
-      render: createRender({}),
     });
 
     const resolver = new InstrumentedResolver(environment);

test/dataFrom.test.js → test/fetchPolicy.test.js

@@ -1,7 +1,6 @@
 import delay from 'delay';
 import ServerProtocol from 'farce/lib/ServerProtocol';
 import createFarceRouter from 'found/lib/createFarceRouter';
-import createRender from 'found/lib/createRender';
 import pDefer from 'p-defer';
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
@@ -14,7 +13,7 @@ import {
 } from './helpers';
 
 const query = graphql`
-  query dataFrom_default_Query {
+  query fetchPolicy_default_Query {
     widget {
       name
     }
@@ -36,7 +35,7 @@ function createRecords() {
   };
 }
 
-describe('dataFrom', () => {
+describe('fetchPolicy', () => {
   let fetchSpy;
   let renderSpy;
 
@@ -48,7 +47,7 @@ describe('dataFrom', () => {
     ));
   });
 
-  describe('default (NETWORK_ONLY)', () => {
+  describe('default (network-only)', () => {
     let Router;
 
     beforeEach(() => {
@@ -61,8 +60,6 @@ describe('dataFrom', () => {
             render: renderSpy,
           },
         ],
-
-        render: createRender({}),
       });
     });
 
@@ -100,7 +97,7 @@ describe('dataFrom', () => {
     });
   });
 
-  describe('STORE_THEN_NETWORK', () => {
+  describe('store-and-network', () => {
     let Router;
 
     beforeEach(() => {
@@ -111,11 +108,9 @@ describe('dataFrom', () => {
             path: '/',
             query,
             render: renderSpy,
-            dataFrom: 'STORE_THEN_NETWORK',
+            fetchPolicy: 'store-and-network',
           },
         ],
-
-        render: createRender({}),
       });
     });
 
@@ -209,7 +204,7 @@ describe('dataFrom', () => {
     });
   });
 
-  describe('STORE_OR_NETWORK', () => {
+  describe('store-or-network', () => {
     let Router;
 
     beforeEach(() => {
@@ -220,11 +215,9 @@ describe('dataFrom', () => {
             path: '/',
             query,
             render: renderSpy,
-            dataFrom: 'STORE_OR_NETWORK',
+            fetchPolicy: 'store-or-network',
           },
         ],
-
-        render: createRender({}),
       });
     });
 

test/navigation.test.js

@@ -1,7 +1,6 @@
 import FarceActions from 'farce/lib/Actions';
 import MemoryProtocol from 'farce/lib/MemoryProtocol';
 import createFarceRouter from 'found/lib/createFarceRouter';
-import createRender from 'found/lib/createRender';
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import { graphql } from 'react-relay';
@@ -32,8 +31,6 @@ describe('navigation', () => {
             props && <div className={props.widget.name} />,
         },
       ],
-
-      render: createRender({}),
     });
 
     const resolver = new InstrumentedResolver(environment);
@@ -123,8 +120,6 @@ describe('navigation', () => {
           ],
         },
       ],
-
-      render: createRender({}),
     });
 
     const resolver = new InstrumentedResolver(environment);

test/refetch.test.js

@@ -1,4 +1,3 @@
-import createRender from 'found/lib/createRender';
 import getFarceResult from 'found/lib/server/getFarceResult';
 import { graphql } from 'react-relay';
 
@@ -45,14 +44,13 @@ describe('refetch behavior', () => {
     ];
 
     const resolver = new Resolver(environment);
-    const render = createRender({});
 
     expect(fetchSpy.mock.calls).toHaveLength(0);
 
-    await getFarceResult({ url: '/foo', routeConfig, resolver, render });
+    await getFarceResult({ url: '/foo', routeConfig, resolver });
     expect(fetchSpy.mock.calls).toHaveLength(2);
 
-    await getFarceResult({ url: '/bar', routeConfig, resolver, render });
+    await getFarceResult({ url: '/bar', routeConfig, resolver });
     expect(fetchSpy.mock.calls).toHaveLength(3);
   });
 });