@shopify/react-graphql - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

CHANGELOG.md

@@ -10,2 +10,9 @@ # Changelog
 
+## 1.2.0 - 2019-02-15
+
+### Added
+
+- `createAsyncQueryComponent` now accepts a `defer` property that dictates whether that component should wait until mount or idle to start loading the query ([#517](https://github.com/Shopify/quilt/pull/517))
+- The component returned from `createAsyncQueryComponent` and its static `Preload`, `Prefetch`, and `KeepFresh` components all accept an `async` prop that is an object with an optional `defer` property, which controls the way loading is done for just that element ([#517](https://github.com/Shopify/quilt/pull/517))
+
 ## 1.1.0 - 2019-02-10
@@ -12,0 +19,0 @@

dist/async.d.ts

 import { LoadProps } from '@shopify/async';
+import { DeferTiming } from '@shopify/react-async';
 import { DocumentNode } from 'graphql-typed';
 import { AsyncQueryComponentType } from './types';
 interface QueryComponentOptions<Data, Variables> extends LoadProps<DocumentNode<Data, Variables>> {
+    defer?: DeferTiming;
 }
-export declare function createAsyncQueryComponent<Data, Variables>({ id, load, }: QueryComponentOptions<Data, Variables>): AsyncQueryComponentType<Data, Variables>;
+export declare function createAsyncQueryComponent<Data, Variables>({ id, load, defer, }: QueryComponentOptions<Data, Variables>): AsyncQueryComponentType<Data, Variables>;
 export {};

dist/async.js

@@ -9,22 +9,26 @@ "use strict";
 function createAsyncQueryComponent(_a) {
-    var id = _a.id, load = _a.load;
+    var id = _a.id, load = _a.load, defer = _a.defer;
     function AsyncQuery(props) {
-        return (React.createElement(react_async_1.Async, { load: load, id: id, render: function (query) {
-                return query ? React.createElement(Query_1.Query, tslib_1.__assign({ query: query }, props)) : null;
-            } }));
+        var _a = tslib_1.__read(splitProps(props), 2), componentProps = _a[0], asyncProps = _a[1];
+        return (React.createElement(react_async_1.Async, tslib_1.__assign({ id: id, load: load, defer: defer, render: function (query) {
+                return query ? React.createElement(Query_1.Query, tslib_1.__assign({ query: query }, componentProps)) : null;
+            } }, asyncProps)));
     }
-    function Prefetch(_a) {
-        var variables = _a.variables;
-        return (React.createElement(react_async_1.Async, { defer: true, load: load, render: function (query) {
+    function Prefetch(props) {
+        var _a = tslib_1.__read(splitProps(props), 2), componentProps = _a[0], asyncProps = _a[1];
+        var variables = componentProps.variables;
+        return (React.createElement(react_async_1.Async, tslib_1.__assign({ load: load, defer: react_async_1.DeferTiming.Mount, render: function (query) {
                 return query ? (React.createElement(Prefetch_1.Prefetch, { ignoreCache: true, query: query, variables: variables })) : null;
-            } }));
+            } }, asyncProps)));
     }
-    function Preload() {
-        return React.createElement(react_async_1.Async, { defer: true, load: load, id: id });
+    function Preload(props) {
+        var asyncProps = splitProps(props)[1];
+        return (React.createElement(react_async_1.Async, tslib_1.__assign({ defer: react_async_1.DeferTiming.Idle, load: load, id: id }, asyncProps)));
     }
-    function KeepFresh(_a) {
-        var variables = _a.variables, _b = _a.pollInterval, pollInterval = _b === void 0 ? 10000 : _b;
-        return (React.createElement(react_async_1.Async, { defer: true, load: load, render: function (query) {
+    function KeepFresh(props) {
+        var _a = tslib_1.__read(splitProps(props), 2), componentProps = _a[0], asyncProps = _a[1];
+        var variables = componentProps.variables, _b = componentProps.pollInterval, pollInterval = _b === void 0 ? 10000 : _b;
+        return (React.createElement(react_async_1.Async, tslib_1.__assign({ load: load, defer: react_async_1.DeferTiming.Idle, render: function (query) {
                 return query ? (React.createElement(Prefetch_1.Prefetch, { query: query, pollInterval: pollInterval, variables: variables })) : null;
-            } }));
+            } }, asyncProps)));
     }
@@ -41,1 +45,5 @@ // Once we upgrade past TS 3.1, this will no longer be necessary,
 exports.createAsyncQueryComponent = createAsyncQueryComponent;
+function splitProps(props) {
+    var _a = props, async = _a.async, rest = tslib_1.__rest(_a, ["async"]);
+    return [rest, async];
+}

dist/index.d.ts

@@ -0,1 +1,2 @@
+export { DeferTiming } from '@shopify/react-async';
 export { Query } from './Query';
@@ -2,0 +3,0 @@ export { Prefetch, Props as PrefetchProps } from './Prefetch';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_async_1 = require("@shopify/react-async");
+exports.DeferTiming = react_async_1.DeferTiming;
 var Query_1 = require("./Query");
@@ -4,0 +6,0 @@ exports.Query = Query_1.Query;

dist/types.d.ts

@@ -6,2 +6,3 @@ import * as React from 'react';
 import { Omit, IfEmptyObject, IfAllNullableKeys } from '@shopify/useful-types';
+import { AsyncPropsRuntime } from '@shopify/react-async';
 export declare type VariableOptions<Variables> = IfEmptyObject<Variables, {
@@ -30,11 +31,14 @@ variables?: never;
 } & VariableOptions<Variables>;
+export interface ConstantProps {
+    async?: AsyncPropsRuntime;
+}
 export interface AsyncQueryComponentType<Data, Variables> {
-    (props: Omit<QueryProps<Data, Variables>, 'query'>): React.ReactElement<{}>;
-    Prefetch(props: VariableOptions<Variables>): React.ReactElement<{}>;
-    Preload(): React.ReactElement<{}>;
+    (props: Omit<QueryProps<Data, Variables>, 'query'> & ConstantProps): React.ReactElement<{}>;
+    Prefetch(props: VariableOptions<Variables> & ConstantProps): React.ReactElement<{}>;
+    Preload(props: ConstantProps): React.ReactElement<{}>;
     KeepFresh(props: VariableOptions<Variables> & {
         pollInterval?: number;
-    }): React.ReactElement<{}>;
+    } & ConstantProps): React.ReactElement<{}>;
 }
 export declare type GraphQLData<T> = T extends DocumentNode<infer Data, any> ? Data : T extends AsyncQueryComponentType<infer Data, any> ? Data : never;
 export declare type GraphQLVariables<T> = T extends DocumentNode<any, infer Variables> ? Variables : T extends AsyncQueryComponentType<any, infer Variables> ? Variables : never;

package.json

 {
   "name": "@shopify/react-graphql",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
@@ -28,3 +28,3 @@ "description": "Tools for creating type-safe and asynchronous GraphQL components for React.",
     "@shopify/async": "^1.0.1",
-    "@shopify/react-async": "^1.0.2",
+    "@shopify/react-async": "^1.1.0",
     "@shopify/useful-types": "^1.1.1",
@@ -31,0 +31,0 @@ "graphql-typed": "^0.2.0",

README.md

@@ -70,2 +70,13 @@ # `@shopify/react-graphql`
 
+As with `@shopify/react-async`, you can also pass a `defer` prop that is a member of the `DeferTiming` enum to force the GraphQL query to resolve later on in its lifecycle:
+
+```tsx
+import {createAsyncQueryComponent, DeferTiming} from '@shopify/react-graphql';
+
+const ProductDetailsQuery = createAsyncQueryComponent({
+  load: () => import('./graphql/ProductDetailsQuery.graphql'),
+  defer: DeferTiming.Idle,
+});
+```
+
 This component can now be used just like a regular `Query` component. It accepts all the same props, except that the query (and associated types) are already embedded in it, so those do not need to be provided.
@@ -118,1 +129,18 @@
 ```
+
+All components created by this library also reserve an `async` prop (that is, you can’t have any props on these components also named `async`). This prop can be used to pass custom instructions to the underlying async loading component.
+
+Currently, this prop is an object with a `defer?: DeferTiming` property, which changes the default `defer` behaviour of the component (by default, the `Query`/ "root" component is not deferred, `Preload` and `KeepFresh` are deferred until idle, and `Prefetch` is deferred until mount).
+
+```tsx
+const MyQuery = createAsyncQueryComponent({
+  load: () => import('./graphql/MyQuery.graphql'),
+});
+
+<MyQuery async={{defer: DeferTiming.Mount}} />
+
+// This will force all of these components not to be deferred at all
+<MyQuery.Preload async={{defer: undefined}} />
+<MyQuery.Prefetch async={{defer: undefined}} />
+<MyQuery.KeepFresh pollInterval={20_000} async={{defer: undefined}} />
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16009

increased by23.96%

Lines of code

153

increased by12.5%

Number of lines in readme file

145

increased by23.93%

Dependency changes

• Updated@shopify/react-async@^1.1.0