Merge pull request #117 from relay-tools/relay-offline-load-query

Better compatibility with react-relay-offline

src/RelayEnvironmentProvider.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { Environment } from 'relay-runtime';
 import { ReactRelayContext } from './ReactRelayContext'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
-export const RelayEnvironmentProvider = function(props: {
-    children: React.ReactNode;
-    environment: Environment;
-}): JSX.Element {
+export const RelayEnvironmentProvider = function<
+    TEnvironment extends Environment = Environment
+>(props: { children: React.ReactNode; environment: TEnvironment }): JSX.Element {
     const context = React.useMemo(() => ({ environment: props.environment }), [props.environment]);
     return (
         <ReactRelayContext.Provider value={context}>{props.children}</ReactRelayContext.Provider>

src/RelayHooksType.ts

@@ -162,14 +162,17 @@ export type PaginationData = {
     getFragmentVariables: Function;
 };
 
-export type LoadQuery<TOperationType extends OperationType = OperationType> = {
+export type LoadQuery<
+    TOperationType extends OperationType = OperationType,
+    TEnvironment extends IEnvironment = IEnvironment
+> = {
     next: (
-        environment: IEnvironment,
+        environment: TEnvironment,
         gqlQuery: GraphQLTaggedNode,
         variables?: TOperationType['variables'],
         options?: QueryOptions,
     ) => Promise<void>;
     subscribe: (callback: (value: any) => any) => () => void;
-    getValue: (environment?: IEnvironment) => RenderProps<TOperationType> | Promise<any>;
+    getValue: (environment?: TEnvironment) => RenderProps<TOperationType> | Promise<any>;
     dispose: () => void;
 };

src/loadQuery.ts

@@ -1,11 +1,25 @@
 import * as areEqual from 'fbjs/lib/areEqual';
-import { GraphQLTaggedNode, OperationType, IEnvironment, isPromise } from 'relay-runtime';
+import {
+    GraphQLTaggedNode,
+    OperationType,
+    IEnvironment,
+    isPromise,
+    OperationDescriptor,
+    Disposable,
+} from 'relay-runtime';
 import { QueryFetcher } from './QueryFetcher';
 import { RenderProps, QueryOptions, LoadQuery } from './RelayHooksType';
 import { createOperation } from './Utils';
 
-const internalLoadQuery = <TOperationType extends OperationType = OperationType>(
+export const internalLoadQuery = <TOperationType extends OperationType = OperationType>(
     promise = false,
+    queryExecute = (
+        queryFetcher: QueryFetcher<TOperationType>,
+        environment: IEnvironment,
+        query: OperationDescriptor,
+        options: QueryOptions,
+        retain?: (environment, query) => Disposable,
+    ): RenderProps<TOperationType> => queryFetcher.execute(environment, query, options, retain),
 ): LoadQuery<TOperationType> => {
     let data: RenderProps<TOperationType> | null | Promise<any> = null;
     let listener = undefined;
@@ -47,7 +61,7 @@ const internalLoadQuery = <TOperationType extends OperationType = OperationType>
             prev.query = createOperation(gqlQuery, prev.variables);
         }
         const execute = (): void => {
-            data = queryFetcher.execute(prev.environment, prev.query, prev.options);
+            data = queryExecute(queryFetcher, prev.environment, prev.query, prev.options);
             listener && listener(data);
         };
 

src/useRelayEnvironment.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { IEnvironment } from 'relay-runtime';
 import { ReactRelayContext } from './ReactRelayContext';
 
-export function useRelayEnvironment(): IEnvironment {
+export function useRelayEnvironment<
+    TEnvironment extends IEnvironment = IEnvironment
+>(): TEnvironment {
     const { environment } = React.useContext(ReactRelayContext);
     return environment;
 }