relay-nextjs - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

 {
   "name": "relay-nextjs",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Use Relay in your Next.js apps!",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -153,2 +153,3 @@ `relay-nextjs` acts as a bridge between Next.js and Relay.
   }
+}
 ```
@@ -155,0 +156,0 @@

wired/component.d.ts

 import type { NextPageContext, Redirect } from 'next';
 import { ComponentType, ReactNode } from 'react';
 import { PreloadedQuery } from 'react-relay/hooks';
-import { Environment, GraphQLTaggedNode, OperationType } from 'relay-runtime';
+import { Environment, GraphQLTaggedNode, OperationType, Variables } from 'relay-runtime';
 export interface WiredOptions<ServerSideProps = {}> {
+    /** Fallback rendered when the page suspends. */
     fallback?: ReactNode;
+    variablesFromContext?: (ctx: NextPageContext) => Variables;
+    /** Called when creating a Relay environment on the client. Should be idempotent. */
     createClientEnvironment: () => Environment;
+    /** Props passed to the component when rendering on the client. */
     clientSideProps?: (ctx: NextPageContext) => void | {
         redirect: Redirect;
     };
+    /** Called when creating a Relay environment on the server. */
     createServerEnvironment: (ctx: NextPageContext, props: ServerSideProps) => Promise<Environment>;
+    /** Props passed to the component when rendering on the server. */
     serverSideProps?: (ctx: NextPageContext) => Promise<ServerSideProps | {
@@ -13,0 +19,0 @@ redirect: Redirect;

wired/component.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -11,9 +30,6 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wire = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const router_1 = __importDefault(require("next/router"));
+const router_1 = __importStar(require("next/router"));
 const react_1 = require("react");
@@ -27,10 +43,18 @@ const hooks_1 = require("react-relay/hooks");
 relay_runtime_1.RelayFeatureFlags.ENABLE_REQUIRED_DIRECTIVES = true;
+function defaultVariablesFromContext(ctx) {
+    return ctx.query;
+}
 function Wire(Component, query, opts) {
     function WiredComponent(props) {
         var _a;
+        const router = router_1.useRouter();
+        const [queryReference, loadQuery] = hooks_1.useQueryLoader(query, props.preloadedQuery);
+        react_1.useEffect(() => {
+            loadQuery(router.query);
+        }, [loadQuery, router.query]);
         if (props.CSN) {
-            return (jsx_runtime_1.jsx(error_boundry_1.WiredErrorBoundry, { children: jsx_runtime_1.jsx(react_1.Suspense, Object.assign({ fallback: (_a = opts.fallback) !== null && _a !== void 0 ? _a : 'Loading...' }, { children: jsx_runtime_1.jsx(Component, Object.assign({}, props), void 0) }), void 0) }, void 0));
+            return (jsx_runtime_1.jsx(error_boundry_1.WiredErrorBoundry, { children: jsx_runtime_1.jsx(react_1.Suspense, Object.assign({ fallback: (_a = opts.fallback) !== null && _a !== void 0 ? _a : 'Loading...' }, { children: jsx_runtime_1.jsx(Component, Object.assign({}, props, { preloadedQuery: queryReference }), void 0) }), void 0) }, void 0));
         }
         else {
-            return jsx_runtime_1.jsx(Component, Object.assign({}, props), void 0);
+            return jsx_runtime_1.jsx(Component, Object.assign({}, props, { preloadedQuery: queryReference }), void 0);
         }
@@ -54,2 +78,3 @@ }
     return __awaiter(this, void 0, void 0, function* () {
+        const { variablesFromContext = defaultVariablesFromContext } = opts;
         const serverSideProps = opts.serverSideProps
@@ -67,3 +92,3 @@ ? yield opts.serverSideProps(ctx)
         const env = yield opts.createServerEnvironment(ctx, serverSideProps);
-        const variables = ctx.query;
+        const variables = variablesFromContext(ctx);
         const preloadedQuery = hooks_1.loadQuery(env, query, variables);
@@ -80,2 +105,3 @@ yield ensureQueryFlushed(preloadedQuery);
 function getClientInitialProps(ctx, query, opts) {
+    const { variablesFromContext = defaultVariablesFromContext } = opts;
     const clientSideProps = opts.clientSideProps
@@ -89,3 +115,3 @@ ? opts.clientSideProps(ctx)
     const env = opts.createClientEnvironment();
-    const variables = ctx.query;
+    const variables = variablesFromContext(ctx);
     const preloadedQuery = hooks_1.loadQuery(env, query, variables, {
@@ -92,0 +118,0 @@ fetchPolicy: 'store-and-network',

No alert changes

Improved metrics

Total package byte prevSize

28394

increased by6.44%

Lines of code

419

increased by8.27%

Number of lines in readme file

252

increased by0.4%

No dependency changes