From 3c6dcc79ee7f7658c24cf37cfa46e1618a5eaa70 Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Thu, 14 Sep 2023 13:17:53 +1000
Subject: [PATCH] update with useQueryKeyFactory

---
 src/hooks/ensjs/public/usePrimaryName.ts | 52 ++++++++----------------
 src/hooks/ensjs/public/useRecords.ts     | 35 +++++-----------
 src/hooks/useQueryKeyFactory.ts          | 48 ++++++++++++++++++++++
 src/types/index.ts                       |  4 +-
 4 files changed, 79 insertions(+), 60 deletions(-)
 create mode 100644 src/hooks/useQueryKeyFactory.ts

diff --git a/src/hooks/ensjs/public/usePrimaryName.ts b/src/hooks/ensjs/public/usePrimaryName.ts
index dc3cbcd83..a9921245b 100644
--- a/src/hooks/ensjs/public/usePrimaryName.ts
+++ b/src/hooks/ensjs/public/usePrimaryName.ts
@@ -1,17 +1,12 @@
 import { QueryFunctionContext } from '@tanstack/react-query'
 import { getPublicClient } from '@wagmi/core'
 import type { Address } from 'viem'
-import { useAccount, useQuery } from 'wagmi'
+import { useQuery } from 'wagmi'
 
 import { GetNameParameters, GetNameReturnType, getName } from '@ensdomains/ensjs/public'
 
-import { useChainId } from '@app/hooks/chain/useChainId'
-import {
-  BaseQueryKeyParameters,
-  CreateQueryKey,
-  PublicClientWithChain,
-  QueryConfig,
-} from '@app/types'
+import { useQueryKeyFactory } from '@app/hooks/useQueryKeyFactory'
+import { CreateQueryKey, PublicClientWithChain, QueryConfig } from '@app/types'
 import { tryBeautify } from '@app/utils/beautify'
 
 type UsePrimaryNameParameters = Omit<GetNameParameters, 'address'> & {
@@ -21,18 +16,7 @@ type UsePrimaryNameParameters = Omit<GetNameParameters, 'address'> & {
 
 type UsePrimaryNameConfig = QueryConfig<GetNameReturnType, Error>
 
-type QueryKeyParameters<TParams extends UsePrimaryNameParameters> = BaseQueryKeyParameters &
-  Pick<UsePrimaryNameConfig, 'scopeKey'> & { params: TParams }
-type QueryKey<TParams extends UsePrimaryNameParameters> = CreateQueryKey<TParams, 'getName'>
-
-const queryKey = <TParams extends UsePrimaryNameParameters>({
-  chainId,
-  address,
-  scopeKey,
-  params,
-}: QueryKeyParameters<TParams>): QueryKey<TParams> => {
-  return [params, chainId, address, scopeKey, 'getName']
-}
+type QueryKey<TParams extends UsePrimaryNameParameters> = CreateQueryKey<TParams, 'getName', false>
 
 export const getPrimaryNameQueryFn = async <TParams extends UsePrimaryNameParameters>({
   queryKey: [{ address, ...params }, chainId],
@@ -64,21 +48,21 @@ export const usePrimaryName = <TParams extends UsePrimaryNameParameters>({
   allowMismatch = false,
   ...params
 }: TParams & UsePrimaryNameConfig) => {
-  const chainId = useChainId()
-  const { address } = useAccount()
+  const queryKey = useQueryKeyFactory({
+    params: { ...params, allowMismatch },
+    scopeKey,
+    functionName: 'getName',
+    isGraphQuery: false,
+  })
 
-  const query = useQuery(
-    queryKey({ chainId, address, scopeKey, params: { ...params, allowMismatch } }),
-    getPrimaryNameQueryFn,
-    {
-      cacheTime,
-      enabled: enabled && !!params.address,
-      staleTime,
-      onError,
-      onSettled,
-      onSuccess,
-    },
-  )
+  const query = useQuery(queryKey, getPrimaryNameQueryFn, {
+    cacheTime,
+    enabled: enabled && !!params.address,
+    staleTime,
+    onError,
+    onSettled,
+    onSuccess,
+  })
 
   return {
     ...query,
diff --git a/src/hooks/ensjs/public/useRecords.ts b/src/hooks/ensjs/public/useRecords.ts
index 9810cceff..3a2a83806 100644
--- a/src/hooks/ensjs/public/useRecords.ts
+++ b/src/hooks/ensjs/public/useRecords.ts
@@ -1,17 +1,11 @@
 import { QueryFunctionContext } from '@tanstack/react-query'
 import { getPublicClient } from '@wagmi/core'
-import { useAccount, useQuery } from 'wagmi'
+import { useQuery } from 'wagmi'
 
 import { GetRecordsParameters, GetRecordsReturnType, getRecords } from '@ensdomains/ensjs/public'
 
-import { useChainId } from '@app/hooks/chain/useChainId'
-import {
-  BaseQueryKeyParameters,
-  CreateQueryKey,
-  PartialBy,
-  PublicClientWithChain,
-  QueryConfig,
-} from '@app/types'
+import { useQueryKeyFactory } from '@app/hooks/useQueryKeyFactory'
+import { CreateQueryKey, PartialBy, PublicClientWithChain, QueryConfig } from '@app/types'
 
 type UseRecordsParameters = PartialBy<GetRecordsParameters, 'name'>
 
@@ -24,18 +18,7 @@ type UseRecordsConfig<TParams extends UseRecordsParameters> = QueryConfig<
   Error
 >
 
-type QueryKeyParameters<TParams extends UseRecordsParameters> = BaseQueryKeyParameters &
-  Pick<UseRecordsConfig<TParams>, 'scopeKey'> & { params: TParams }
-type QueryKey<TParams extends UseRecordsParameters> = CreateQueryKey<TParams, 'getRecords'>
-
-const queryKey = <TParams extends UseRecordsParameters>({
-  chainId,
-  address,
-  scopeKey,
-  params,
-}: QueryKeyParameters<TParams>): QueryKey<TParams> => {
-  return [params, chainId, address, scopeKey, 'getRecords']
-}
+type QueryKey<TParams extends UseRecordsParameters> = CreateQueryKey<TParams, 'getRecords', false>
 
 export const getRecordsQueryFn = async <TParams extends UseRecordsParameters>({
   queryKey: [{ name, ...params }, chainId],
@@ -63,10 +46,14 @@ export const useRecords = <TParams extends UseRecordsParameters>({
   // params
   ...params
 }: TParams & UseRecordsConfig<TParams>) => {
-  const chainId = useChainId()
-  const { address } = useAccount()
+  const queryKey = useQueryKeyFactory({
+    params,
+    scopeKey,
+    functionName: 'getRecords',
+    isGraphQuery: false,
+  })
 
-  const query = useQuery(queryKey({ chainId, address, scopeKey, params }), getRecordsQueryFn, {
+  const query = useQuery(queryKey, getRecordsQueryFn, {
     cacheTime,
     staleTime,
     enabled: enabled && !!params.name,
diff --git a/src/hooks/useQueryKeyFactory.ts b/src/hooks/useQueryKeyFactory.ts
new file mode 100644
index 000000000..fd7e068dc
--- /dev/null
+++ b/src/hooks/useQueryKeyFactory.ts
@@ -0,0 +1,48 @@
+import { useAccount } from 'wagmi'
+
+import { CreateQueryKey } from '@app/types'
+
+import { useChainId } from './chain/useChainId'
+
+export function useQueryKeyFactory<TParams extends {}, TFunctionName extends string>({
+  params,
+  scopeKey,
+  functionName,
+  isGraphQuery,
+}: {
+  params: TParams
+  scopeKey?: string
+  functionName: TFunctionName
+  isGraphQuery: false
+}): CreateQueryKey<TParams, TFunctionName, false>
+export function useQueryKeyFactory<TParams extends {}, TFunctionName extends string>({
+  params,
+  scopeKey,
+  functionName,
+  isGraphQuery,
+}: {
+  params: TParams
+  scopeKey?: string
+  functionName: TFunctionName
+  isGraphQuery: true
+}): CreateQueryKey<TParams, TFunctionName, true>
+export function useQueryKeyFactory<TParams extends {}, TFunctionName extends string>({
+  params,
+  scopeKey,
+  functionName,
+  isGraphQuery,
+}: {
+  params: TParams
+  scopeKey?: string
+  functionName: TFunctionName
+  isGraphQuery: boolean
+}): CreateQueryKey<TParams, TFunctionName, boolean> {
+  const chainId = useChainId()
+  const { address } = useAccount()
+
+  if (isGraphQuery) {
+    return [params, chainId, address ?? undefined, scopeKey, functionName, 'graph'] as const
+  } else {
+    return [params, chainId, address ?? undefined, scopeKey, functionName] as const
+  }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index c76b0e70d..3181c6019 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -178,15 +178,15 @@ export type BaseQueryKeyParameters = { chainId: number; address: Address | undef
 export type CreateQueryKey<
   TParams extends {},
   TFunctionName extends string,
-  TGraphQuery extends boolean = false,
+  TGraphQuery extends boolean,
 > = TGraphQuery extends true
   ? readonly [
       params: TParams,
       chainId: number,
       address: Address | undefined,
-      graphKey: 'graph',
       scopeKey: string | undefined,
       functionName: TFunctionName,
+      graphKey: 'graph',
     ]
   : readonly [
       params: TParams,