usePreloadedQuery, loadQuery & loadLazyQuery

[morrys]

this PR introduces usePreloadedQuery, useLoad & useLazyLoad

loadQuery

• input parameters

same as useQuery + environment

• output parameters
  • next: ( environment: IEnvironment, gqlQuery: GraphQLTaggedNode, variables?: TOperationType['variables'], options?: QueryOptions, ) => Promise<void>: fetches data. A promise returns to allow the await in case of SSR
  • dispose: () => void: cancel the subscription and dispose of the fetch
  • subscribe: (callback: (value: any) => any) => () => void: used by the usePreloadedQuery
  • getValue: (environment?: IEnvironment) => RenderProps<TOperationType> | Promise<any>: used by the usePreloadedQuery

import {graphql, loadQuery} from 'relay-hooks';
import {environment} from ''./environment';

const query = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

const prefetch = loadQuery();
prefetch.next(
  environment,
  query,
  {id: '4'},
  {fetchPolicy: 'store-or-network'},
);
// pass prefetch to usePreloadedQuery()

loadLazyQuery

is the same as loadQuery but must be used with suspense

usePreloadedQuery

• input parameters

  • loadQuery | loadLazyQuery

• output parameters

  • same as useQuery

function Component(props) {
  data = usePreloadedQuery(props.prefetched);
  return data;
}

Both the implementation and its use differs from the current implementation in relay-experimental.

In summary, it implements the logic of the BehaviorSubject of rxjs including the subscribe, getValue and the next but with the difference that the next function it is asynchronous and introduces the "dispose".

Through this management it is sufficient to create a single loadQuery to manage multiple routes and avoid using cache maps within the library.

While the dispose function has been designed to manage error cases in order to correctly delete the last route performed.