Use graphql-hooks instead of @apollo/client

packages/web/package.json

@@ -8,10 +8,11 @@
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@apollo/client": "^3.2.5",
     "@types/react": "16.9.53",
     "core-js": "3.6.5",
     "graphql": "^15.3.0",
+    "graphql-hooks": "^5.0.0",
+    "graphql-hooks-memcache": "^2.0.0",
     "proptypes": "^1.1.0"
   },
   "devDependencies": {

packages/web/src/components/GraphQLHooksProvider.tsx

@@ -1,28 +1,21 @@
 import type { DocumentNode } from 'graphql'
 
-export interface GraphQLHookOptions {
-  variables?: Record<string, any>
-}
-export interface OperationResult<TData = any> {
-  data?: TData
-  loading: boolean
-  error?: Error
-}
-
-export type MutationOperationResult<TData = any> = [
-  (options?: any) => Promise<TData>,
-  OperationResult<TData>
-]
+import {
+  BaseQueryOptions,
+  MutationHookOptions,
+  MutationOperationResultTuple,
+  OperationResult,
+} from 'src/graphql'
 
 export interface GraphQLHooks {
-  useQuery: (
+  useQuery: <TData, TVariables>(
     query: DocumentNode,
-    options?: GraphQLHookOptions
-  ) => OperationResult
-  useMutation: (
+    options?: BaseQueryOptions<TVariables>
+  ) => OperationResult<TData>
+  useMutation: <TData, TVariables>(
     mutation: DocumentNode,
-    options?: GraphQLHookOptions
-  ) => MutationOperationResult
+    options?: MutationHookOptions<TData, TVariables>
+  ) => MutationOperationResultTuple<TData, TVariables>
 }
 export const GraphQLHooksContext = React.createContext<GraphQLHooks>({
   useQuery: () => {
@@ -37,45 +30,52 @@ export const GraphQLHooksContext = React.createContext<GraphQLHooks>({
   },
 })
 
+interface ProviderProps {
+  useQuery: <TData, TVariables>(
+    query: DocumentNode,
+    options?: BaseQueryOptions<TVariables>
+  ) => OperationResult<TData>
+  useMutation: <TData, TVariables>(
+    mutation: DocumentNode,
+    options?: MutationHookOptions<TData, TVariables>
+  ) => MutationOperationResultTuple<TData, TVariables>
+}
+
 /**
- * GraphQLHooksProvider stores standard `useQuery` and `useMutation` hooks for Redwood
- * that can be mapped to your GraphQL library of choice's own `useQuery`
+ * GraphQLHooksProvider stores standard `useQuery` and `useMutation` hooks for
+ * Redwood that can be mapped to your GraphQL library of choice's own `useQuery`
  * and `useMutation` implementation.
  *
  * @todo Let the user pass in the additional type for options.
  */
-export const GraphQLHooksProvider: React.FunctionComponent<{
-  useQuery: (
-    query: DocumentNode,
-    options?: GraphQLHookOptions
-  ) => OperationResult
-  useMutation: (
-    mutation: DocumentNode,
-    options?: GraphQLHookOptions
-  ) => MutationOperationResult
-}> = ({ useQuery, useMutation, children }) => {
+export const GraphQLHooksProvider: React.FC<ProviderProps> = ({
+  useQuery,
+  useMutation,
+  children,
+}) => {
   return (
-    <GraphQLHooksContext.Provider
-      value={{
-        useQuery,
-        useMutation,
-      }}
-    >
+    <GraphQLHooksContext.Provider value={{ useQuery, useMutation }}>
       {children}
     </GraphQLHooksContext.Provider>
   )
 }
 
-export function useQuery<TData = any>(
+export function useQuery<TData, TVariables>(
   query: DocumentNode,
-  options?: GraphQLHookOptions
+  options?: BaseQueryOptions<TVariables>
 ): OperationResult<TData> {
-  return React.useContext(GraphQLHooksContext).useQuery(query, options)
+  return React.useContext(GraphQLHooksContext).useQuery<TData, TVariables>(
+    query,
+    options
+  )
 }
 
-export function useMutation<TData = any>(
+export function useMutation<TData, TVariables>(
   mutation: DocumentNode,
-  options?: GraphQLHookOptions
-): MutationOperationResult<TData> {
-  return React.useContext(GraphQLHooksContext).useMutation(mutation, options)
+  options?: MutationHookOptions<TData, TVariables>
+): MutationOperationResultTuple<TData, TVariables> {
+  return React.useContext(GraphQLHooksContext).useMutation<TData, TVariables>(
+    mutation,
+    options
+  )
 }

packages/web/src/components/RedwoodGraphqlHooksProvider.tsx

@@ -0,0 +1,80 @@
+import type { DocumentNode } from 'graphql'
+import {
+  GraphQLClient,
+  ClientContext,
+  ClientOptions,
+  useQuery,
+  useMutation,
+} from 'graphql-hooks'
+import memCache from 'graphql-hooks-memcache'
+
+import type { AuthContextInterface } from '@redwoodjs/auth'
+
+import {
+  FetchConfigProvider,
+  useFetchConfig,
+} from 'src/components/FetchConfigProvider'
+import { GraphQLHooksProvider } from 'src/components/GraphQLHooksProvider'
+import { FlashProvider } from 'src/flash'
+import {
+  BaseQueryOptions,
+  GqlError,
+  MutationHookOptions,
+  MutationOperationResultTuple,
+} from 'src/graphql'
+
+const ApolloProviderWithFetchConfig: React.FunctionComponent<{
+  config?: Omit<ClientOptions, 'cache'>
+}> = ({ config = {}, children }) => {
+  const { uri: url, headers } = useFetchConfig()
+
+  const client = new GraphQLClient({
+    cache: memCache(),
+    url,
+    headers,
+    ...config,
+  })
+
+  return (
+    <ClientContext.Provider value={client}>{children}</ClientContext.Provider>
+  )
+}
+
+function getGqlString(doc: DocumentNode) {
+  return doc.loc?.source.body ?? ''
+}
+
+const useQueryAdapter = <TData, TVariables>(
+  query: DocumentNode,
+  options?: BaseQueryOptions<TVariables>
+) => {
+  return useQuery<TData, TVariables, GqlError>(getGqlString(query), options)
+}
+
+const useMutationAdapter = <TData, TVariables>(
+  mutation: DocumentNode,
+  options?: MutationHookOptions<TData, TVariables>
+) => {
+  return useMutation<TData, TVariables, GqlError>(
+    getGqlString(mutation),
+    options
+  ).slice(0, 2) as MutationOperationResultTuple<TData, TVariables>
+}
+
+export const RedwoodGraphqlHooksProvider: React.FC<{
+  graphQLClientConfig?: Omit<ClientOptions, 'cache'>
+  useAuth: () => AuthContextInterface
+}> = ({ graphQLClientConfig, useAuth, children }) => {
+  return (
+    <FetchConfigProvider useAuth={useAuth}>
+      <ApolloProviderWithFetchConfig config={graphQLClientConfig}>
+        <GraphQLHooksProvider
+          useQuery={useQueryAdapter}
+          useMutation={useMutationAdapter}
+        >
+          <FlashProvider>{children}</FlashProvider>
+        </GraphQLHooksProvider>
+      </ApolloProviderWithFetchConfig>
+    </FetchConfigProvider>
+  )
+}

packages/web/src/components/withCellHOC.tsx

@@ -1,33 +1,38 @@
 import type { DocumentNode } from 'graphql'
 
-import { useQuery, OperationResult } from './GraphQLHooksProvider'
+import { OperationResult } from 'src/graphql'
+
+import { useQuery } from './GraphQLHooksProvider'
+
+export type DataObject = Record<string, unknown>
+
+export type OperationVariables = Record<string, unknown>
 
 const Query: React.FunctionComponent<{
   query: DocumentNode
-  children: (result: OperationResult) => React.ReactElement
+  children: (result: OperationResult<DataObject>) => React.ReactElement
 }> = ({ children, query, ...rest }) => {
-  const result = useQuery(query, rest)
+  const result = useQuery<DataObject, OperationVariables>(query, rest)
   return children && result ? children(result) : null
 }
 
-export type DataObject = { [key: string]: unknown }
-
 export type CellFailureStateComponent = Omit<
-  OperationResult,
+  OperationResult<DataObject>,
   'data' | 'loading'
 >
 export type CellLoadingEmptyStateComponent = Omit<
-  OperationResult,
+  OperationResult<DataObject>,
   'error' | 'loading' | 'data'
 >
 export type CellSuccessStateComponent =
-  | Omit<OperationResult, 'error' | 'loading' | 'data'>
+  | Omit<OperationResult<unknown>, 'error' | 'loading' | 'data'>
   | DataObject
 
 export interface WithCellProps {
-  beforeQuery?: <TProps>(props: TProps) => { variables: TProps }
-  // @ts-expect-error We do not know, and even really care, what they are here.
-  QUERY: DocumentNode | (({ variables: unknown }) => DocumentNode)
+  beforeQuery?: <TVariables>(variables: TVariables) => { variables: TVariables }
+  QUERY:
+    | DocumentNode
+    | (<TVariables>({ variables }: { variables: TVariables }) => DocumentNode)
   afterQuery?: (data: DataObject) => DataObject
   Loading?: React.FC<CellLoadingEmptyStateComponent>
   Failure?: React.FC<CellFailureStateComponent>
@@ -71,8 +76,8 @@ export interface WithCellProps {
  * }
  */
 export const withCell = ({
-  beforeQuery = (props) => ({
-    variables: props,
+  beforeQuery = (variables) => ({
+    variables,
     fetchPolicy: 'cache-and-network',
     nextFetchPolicy: 'cache-first',
   }),

packages/web/src/graphql/index.tsx

@@ -0,0 +1,54 @@
+import type { GraphQLError, ExecutionResult } from 'graphql'
+
+export declare class GqlError extends Error {
+  message: string
+  graphQLErrors: ReadonlyArray<GraphQLError>
+  extraInfo?: any
+
+  constructor({
+    graphQLErrors,
+    errorMessage,
+    extraInfo,
+  }: {
+    graphQLErrors?: ReadonlyArray<GraphQLError>
+    errorMessage?: string
+    extraInfo?: any
+  })
+}
+
+export interface HttpError {
+  status: number
+  statusText: string
+  body: string
+}
+
+export interface APIError {
+  fetchError?: Error
+  httpError?: HttpError
+  graphQLErrors?: GqlError[]
+}
+
+export interface OperationResult<TData> {
+  data?: TData
+  loading: boolean
+  error?: APIError
+}
+
+export interface FetchResult<TData> extends ExecutionResult {
+  data?: TData | null
+}
+
+export type MutationOperationResultTuple<TData, TVariables> = [
+  (options?: TVariables) => Promise<FetchResult<TData>>,
+  OperationResult<TData>
+]
+
+export interface BaseQueryOptions<TVariables> {
+  variables?: TVariables
+}
+
+export interface MutationHookOptions<TData, TVariables>
+  extends BaseQueryOptions<TVariables> {
+  onCompleted?: (data: TData) => void
+  onError?: (error: GqlError) => void
+}

packages/web/src/index.ts

@@ -2,7 +2,7 @@ import './global.web-auto-imports'
 import './config'
 
 export { default as FatalErrorBoundary } from './components/FatalErrorBoundary'
-export { RedwoodApolloProvider as RedwoodProvider } from './components/RedwoodApolloProvider'
+export { RedwoodGraphqlHooksProvider as RedwoodProvider } from './components/RedwoodGraphqlHooksProvider'
 export {
   FetchConfigProvider,
   useFetchConfig,