@joshroy/relay-nextjs 3.1.0 → 3.1.2

package/app.d.ts

@@ -0,0 +1,9 @@
+import type { Environment } from 'react-relay';
+import type { AnyPreloadedQuery, UseRelayNextJsProps } from './component';
+export declare function useRelayNextjs(props: UseRelayNextJsProps, opts: {
+    createClientEnvironment: () => Environment;
+}): {
+    env: Environment;
+    preloadedQuery?: AnyPreloadedQuery;
+    CSN: boolean;
+};

package/app.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelayNextjs = useRelayNextjs;
+const react_1 = require("react");
+const react_relay_1 = require("react-relay");
+const json_meta_1 = require("./json_meta");
+function useRelayNextjs(props, opts) {
+    const hydratedRef = (0, react_1.useRef)(false);
+    const [relayEnvironment] = (0, react_1.useState)(() => {
+        var _a;
+        if ((_a = props.preloadedQuery) === null || _a === void 0 ? void 0 : _a.environment) {
+            return props.preloadedQuery.environment;
+        }
+        const env = opts.createClientEnvironment();
+        if (!hydratedRef.current &&
+            props.payload &&
+            props.payloadMeta &&
+            props.operationDescriptor) {
+            hydratedRef.current = true;
+            (0, json_meta_1.hydrateObject)(props.payloadMeta, props.payload);
+            env.commitPayload(props.operationDescriptor, props.payload.data);
+        }
+        return env;
+    });
+    const preloadedQuery = (0, react_1.useMemo)(() => {
+        if (props.preloadedQuery) {
+            return props.preloadedQuery;
+        }
+        else if (props.operationDescriptor) {
+            return (0, react_relay_1.loadQuery)(relayEnvironment, props.operationDescriptor.request.node, props.operationDescriptor.request.variables, { fetchPolicy: 'store-or-network' });
+        }
+        return undefined;
+    }, [props.preloadedQuery, props.operationDescriptor, relayEnvironment]);
+    const prevQueryRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => {
+        const prev = prevQueryRef.current;
+        prevQueryRef.current = preloadedQuery;
+        if (prev && prev !== preloadedQuery) {
+            prev.dispose();
+        }
+    }, [preloadedQuery]);
+    return { env: relayEnvironment, preloadedQuery, CSN: props.CSN };
+}

package/component.d.ts

@@ -0,0 +1,40 @@
+import type { NextPageContext, Redirect } from 'next';
+import { NextRouter } from 'next/router';
+import { ComponentType, ReactNode } from 'react';
+import { LoadQueryOptions, PreloadedQuery } from 'react-relay';
+import { Environment, GraphQLResponse, GraphQLTaggedNode, OperationDescriptor, OperationType } from 'relay-runtime';
+import { HydrationMeta } from './json_meta';
+export type AnyPreloadedQuery = PreloadedQuery<OperationType>;
+export type RelayProps<P extends {} = {}, Q extends OperationType = OperationType> = P & Required<Pick<UseRelayNextJsProps<P, Q>, 'CSN' | 'preloadedQuery'>>;
+export type UseRelayNextJsProps<P extends {} = {}, Q extends OperationType = OperationType> = P & {
+    /** If this page rendering resulted from a client-side navigation. */
+    CSN: boolean;
+    /** Undefined during initial hydration, but defined for SSR and subsequent renders */
+    preloadedQuery?: PreloadedQuery<Q>;
+    operationDescriptor?: OperationDescriptor;
+    payload?: GraphQLResponse;
+    payloadMeta?: HydrationMeta;
+};
+export type OrRedirect<T> = T | {
+    redirect: Redirect;
+};
+export interface RelayOptions<Props extends RelayProps, ServerSideProps extends {} = {}> {
+    /** Fallback rendered when the page suspends. */
+    fallback?: ReactNode;
+    variablesFromContext?: (ctx: NextPageContext | NextRouter) => Props['preloadedQuery']['variables'];
+    queryOptionsFromContext?: (ctx: NextPageContext | NextRouter) => LoadQueryOptions;
+    /** 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) => OrRedirect<Partial<ServerSideProps>>;
+    /** 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<OrRedirect<ServerSideProps>>;
+    /** Runs after a query has been executed on the server. */
+    serverSidePostQuery?: (queryResult: GraphQLResponse | undefined, ctx: NextPageContext) => Promise<unknown> | unknown;
+}
+export declare function withRelay<Props extends RelayProps, ServerSideProps extends {}>(Component: ComponentType<Props>, query: GraphQLTaggedNode, opts: RelayOptions<Props, ServerSideProps>): {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    getInitialProps: (ctx: NextPageContext) => Promise<UseRelayNextJsProps>;
+};

package/component.js

@@ -0,0 +1,203 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRelay = withRelay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
+const router_1 = __importStar(require("next/router"));
+const react_1 = require("react");
+const react_relay_1 = require("react-relay");
+const relay_runtime_1 = require("relay-runtime");
+const json_meta_1 = require("./json_meta");
+// Enabling this feature flag to determine if a page should 404 on the server.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+relay_runtime_1.RelayFeatureFlags.ENABLE_REQUIRED_DIRECTIVES = true;
+function defaultVariablesFromContext(ctx) {
+    return ctx.query;
+}
+function defaultQueryOptionsFromContext(_ctx) {
+    return { fetchPolicy: 'store-or-network' };
+}
+function useStableIdentity(nextValue) {
+    const lastValue = (0, react_1.useRef)(nextValue);
+    return (0, react_1.useMemo)(() => {
+        if (!(0, lodash_isequal_1.default)(lastValue.current, nextValue)) {
+            lastValue.current = nextValue;
+        }
+        return lastValue.current;
+    }, [nextValue]);
+}
+function withRelay(Component, query, opts) {
+    const { queryOptionsFromContext = defaultQueryOptionsFromContext, variablesFromContext = defaultVariablesFromContext, } = opts;
+    function useLoadedQuery(initialPreloadedQuery) {
+        const router = (0, router_1.useRouter)();
+        const queryOptions = useStableIdentity((0, react_1.useMemo)(() => queryOptionsFromContext(router), [router]));
+        const queryVariables = useStableIdentity((0, react_1.useMemo)(() => variablesFromContext(router), [router]));
+        const [preloadedQuery, setPreloadedQuery] = (0, react_1.useState)(initialPreloadedQuery);
+        const prevInitialRef = (0, react_1.useRef)(initialPreloadedQuery);
+        (0, react_1.useEffect)(() => {
+            if (initialPreloadedQuery &&
+                initialPreloadedQuery !== prevInitialRef.current) {
+                prevInitialRef.current = initialPreloadedQuery;
+                setPreloadedQuery((prev) => {
+                    if (prev && prev !== initialPreloadedQuery) {
+                        prev.dispose();
+                    }
+                    return initialPreloadedQuery;
+                });
+            }
+        }, [initialPreloadedQuery]);
+        const isMountedRef = (0, react_1.useRef)(false);
+        const env = (0, react_relay_1.useRelayEnvironment)();
+        (0, react_1.useEffect)(() => {
+            if (!isMountedRef.current) {
+                isMountedRef.current = true;
+                return;
+            }
+            const nextPreloadedQuery = (0, react_relay_1.loadQuery)(env, query, queryVariables, queryOptions);
+            setPreloadedQuery((prev) => {
+                if (prev) {
+                    prev.dispose();
+                }
+                return nextPreloadedQuery;
+            });
+            return () => nextPreloadedQuery.dispose();
+        }, [env, queryVariables, queryOptions]);
+        return preloadedQuery;
+    }
+    function RelayComponent(props) {
+        var _a;
+        const preloadedQuery = useLoadedQuery(props.preloadedQuery);
+        return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (_a = opts.fallback) !== null && _a !== void 0 ? _a : 'Loading...', children: (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, { preloadedQuery: preloadedQuery })) }));
+    }
+    RelayComponent.getInitialProps = relayInitialProps(query, opts);
+    return RelayComponent;
+}
+function relayInitialProps(query, opts) {
+    return (ctx) => __awaiter(this, void 0, void 0, function* () {
+        if (typeof window === 'undefined') {
+            return getServerInitialProps(ctx, query, opts);
+        }
+        else {
+            return getClientInitialProps(ctx, query, opts);
+        }
+    });
+}
+function getServerInitialProps(ctx, query, opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const { variablesFromContext = defaultVariablesFromContext, queryOptionsFromContext = defaultQueryOptionsFromContext, } = opts;
+        const serverSideProps = opts.serverSideProps
+            ? yield opts.serverSideProps(ctx)
+            : {};
+        if ('redirect' in serverSideProps) {
+            const { redirect } = serverSideProps;
+            let statusCode = 302;
+            if ('statusCode' in redirect) {
+                statusCode = redirect.statusCode;
+            }
+            else if ('permanent' in redirect) {
+                statusCode = redirect.permanent ? 308 : 307;
+            }
+            ctx
+                .res.writeHead(statusCode, {
+                Location: redirect.destination,
+            })
+                .end();
+            return { CSN: false };
+        }
+        const env = yield opts.createServerEnvironment(ctx, serverSideProps);
+        const variables = variablesFromContext(ctx);
+        const queryOptions = queryOptionsFromContext(ctx);
+        const preloadedQuery = (0, react_relay_1.loadQuery)(env, query, variables, queryOptions);
+        const payload = yield ensureQueryFlushed(preloadedQuery);
+        yield ((_a = opts.serverSidePostQuery) === null || _a === void 0 ? void 0 : _a.call(opts, payload, ctx));
+        const payloadSerializationMetadata = (0, json_meta_1.collectMeta)(payload);
+        const request = query;
+        const operationDescriptor = (0, relay_runtime_1.createOperationDescriptor)('default' in request ? request.default : request, variables);
+        const props = Object.assign(Object.assign({}, serverSideProps), { CSN: false, operationDescriptor,
+            payload, payloadMeta: payloadSerializationMetadata });
+        // This will only be available during SSR, not during client side render or hydration.
+        Object.defineProperty(props, 'preloadedQuery', {
+            enumerable: false,
+            value: preloadedQuery,
+        });
+        return props;
+    });
+}
+function getClientInitialProps(ctx, query, opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { variablesFromContext = defaultVariablesFromContext, queryOptionsFromContext = defaultQueryOptionsFromContext, } = opts;
+        const clientSideProps = opts.clientSideProps
+            ? opts.clientSideProps(ctx)
+            : {};
+        if ('redirect' in clientSideProps) {
+            void router_1.default.push(clientSideProps.redirect.destination);
+            return { CSN: true };
+        }
+        const env = opts.createClientEnvironment();
+        const variables = variablesFromContext(ctx);
+        const queryOptions = queryOptionsFromContext(ctx);
+        const preloadedQuery = (0, react_relay_1.loadQuery)(env, query, variables, queryOptions);
+        return Object.assign(Object.assign({}, clientSideProps), { CSN: true, preloadedQuery });
+    });
+}
+function ensureQueryFlushed(query) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            if (query.source == null) {
+                resolve({ data: {} });
+            }
+            else {
+                query.source.subscribe({
+                    next: resolve,
+                    error: reject,
+                });
+            }
+        });
+    });
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export { withRelay } from './component';
+export type { OrRedirect, RelayOptions, RelayProps } from './component';

package/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRelay = void 0;
+var component_1 = require("./component");
+Object.defineProperty(exports, "withRelay", { enumerable: true, get: function () { return component_1.withRelay; } });

package/json_meta.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview Functions for extracting and applying serialization metadata
+ * to JSON. When a JS object is serialized to JSON it will call the `toJSON`
+ * and `toString` methods on objects. When deserializing the original types of
+ * those values are lost. This library exports `collectMeta` which returns a
+ * JSON-serializable representation of how the original object will be
+ * serialized. This can be passed to `hydrateObject` to restore the
+ * original object. Currently supports `Date` and `URL` values.
+ */
+/** Type of value that can be restored. */
+export declare enum EncodedType {
+    DATE = "date",
+    URL = "url"
+}
+export type HydrationMeta = Record<string, EncodedType>;
+/**
+ * Restores the type of values after deserializing a JSON object. Meta must be
+ * the object returned from `collectMeta`. Mutates the object in place.
+ */
+export declare function hydrateObject(meta: HydrationMeta, value: any): void;
+/**
+ * Walks an object and extracts information for hydrating it after
+ * deserialization.
+ */
+export declare function collectMeta(obj: unknown): HydrationMeta;

package/json_meta.js

@@ -0,0 +1,92 @@
+"use strict";
+/**
+ * @fileoverview Functions for extracting and applying serialization metadata
+ * to JSON. When a JS object is serialized to JSON it will call the `toJSON`
+ * and `toString` methods on objects. When deserializing the original types of
+ * those values are lost. This library exports `collectMeta` which returns a
+ * JSON-serializable representation of how the original object will be
+ * serialized. This can be passed to `hydrateObject` to restore the
+ * original object. Currently supports `Date` and `URL` values.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EncodedType = void 0;
+exports.hydrateObject = hydrateObject;
+exports.collectMeta = collectMeta;
+/** Type of value that can be restored. */
+var EncodedType;
+(function (EncodedType) {
+    EncodedType["DATE"] = "date";
+    EncodedType["URL"] = "url";
+})(EncodedType || (exports.EncodedType = EncodedType = {}));
+/**
+ * Restores the type of values after deserializing a JSON object. Meta must be
+ * the object returned from `collectMeta`. Mutates the object in place.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hydrateObject(meta, value) {
+    for (const [path, encoding] of Object.entries(meta)) {
+        let updatingValue = value;
+        const parts = path.split('.');
+        for (let i = 0; i < parts.length - 1; ++i) {
+            let accessor = Number(parts[i]);
+            if (Number.isNaN(accessor)) {
+                accessor = parts[i];
+            }
+            updatingValue = updatingValue[accessor];
+        }
+        let lastAccessor = Number(parts[parts.length - 1]);
+        if (Number.isNaN(lastAccessor)) {
+            lastAccessor = parts[parts.length - 1];
+        }
+        switch (encoding) {
+            case EncodedType.DATE:
+                updatingValue[lastAccessor] = new Date(updatingValue[lastAccessor]);
+                break;
+            case EncodedType.URL:
+                updatingValue[lastAccessor] = new URL(updatingValue[lastAccessor]);
+                break;
+            default:
+                checkExhaustive(encoding);
+        }
+    }
+}
+function* walk() {
+    const path = [];
+    do {
+        const { parent, key, value } = yield path.map(([key]) => key).join('.');
+        while (path.length > 0 && path[path.length - 1][1] !== parent) {
+            path.pop();
+        }
+        path.push([key, value]);
+    } while (path.length > 0);
+}
+function createReplacer() {
+    const meta = {};
+    const walker = walk();
+    function replacer(key, value) {
+        const path = walker.next({ parent: this, key, value }).value;
+        if (path && this[key] instanceof Date) {
+            meta[path] = EncodedType.DATE;
+        }
+        else if (path && this[key] instanceof URL) {
+            meta[path] = EncodedType.URL;
+        }
+        return value;
+    }
+    return [replacer, () => meta];
+}
+/**
+ * Walks an object and extracts information for hydrating it after
+ * deserialization.
+ */
+function collectMeta(obj) {
+    const [replacer, dumpMeta] = createReplacer();
+    JSON.stringify(obj, replacer);
+    return dumpMeta();
+}
+function checkExhaustive(cased) {
+    if (process.env.NODE_ENV !== 'production') {
+        throw new Error(`Unexpected condition: ${cased}`);
+    }
+    return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joshroy/relay-nextjs",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Use Relay in your Next.js apps!",
   "main": "index.js",
   "scripts": {