URQL BoilerPlate

provider.tsx

import { useMemo, ReactNode } from 'react';
import { createClient, Client, Provider, ClientOptions } from 'urql';

type AnyFunction<T = any> = (..._: any[]) => T;

interface SharedProps {
  children?: ReactNode;
}

type URQLURLProps = SharedProps & ClientOptions;
                 
type URQLClientProps = SharedProps & {
  client: Client;
}

type Props = URQLURLProps | URQLClientProps;

export default function URQLProvider(props: Props) {
  const { client } = props as URQLURLProps;
  const {
    url,
    fetchOptions,
    fetch,
    exchanges,
    suspense,
    requestPolicy,
    preferGetMethod,
    maskTypename,
    children,
  } = props as URQLURLProps;

  const clientConn = useMemo(
    () => (
      client
        ? client
        : createClient({
          url,
          fetchOptions,
          fetch,
          exchanges,
          suspense,
          requestPolicy,
          preferGetMethod,
          maskTypename,
        })
    ),
    [
      url,
      fetchOptions,
      fetch,
      exchanges,
      suspense,
      requestPolicy,
      preferGetMethod,
      maskTypename,
    ]
  )

  return (
    <Provider value={client}>
      {children}
    </Provider>
  );
}