fix: Fix problem with wrapper function for useSWRInfinite not working

fix #69

Author: croutonn

README.md

@@ -2,7 +2,7 @@
 
 A [GraphQL code generator](https://graphql-code-generator.com/) plug-in that automatically generates utility functions for [SWR](https://swr.vercel.app/).
 
-# Example
+## Example
 
 ```yaml
 # codegen.yml
@@ -56,11 +56,12 @@ export default sdk
 
 ```tsx
 // pages/posts/[slug].tsx
-import { GetStaticProps, GetStaticPropsResult } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import ErrorPage from 'next/error'
 import { useRouter } from 'next/router'
 import Article from '../components/Article'
 import sdk from '../sdk'
+import { GetArticleQuery } from '../graphql'
 
 type StaticParams = { slug: string }
 type StaticProps = StaticParams & {
@@ -105,7 +106,7 @@ export const getStaticProps: GetStaticProps<StaticProps, StaticParams> = async (
   }
 })
 
-export const ArticlePage = ({ slug, initialData, preview }: ArticlePageProps): JSX.Element => {
+export const ArticlePage: NextPage<ArticlePageProps> = ({ slug, initialData, preview }) => {
   const router = useRouter()
   const { data: { article }, mutate: mutateArticle } = sdk().useGetArticle(
     `UniqueKeyForTheRequest/${slug}`, { slug }, { initialData }
@@ -132,3 +133,20 @@ export const ArticlePage = ({ slug, initialData, preview }: ArticlePageProps): J
   )
 }
 ```
+
+### Example for useSWRInfinite
+
+```tsx
+const { data, size, setSize } = sdk.useMyQueryInfinite(
+  (pageIndex, previousPageData) => {
+    if (previousPageData && !previousPageData.posts.length) {
+      return null // reached the end
+    }
+    return {
+      page: pageIndex,
+    }
+  },
+  variables, // GraphQL Query Variables
+  config // Configuration of useSWRInfinite
+)
+```

src/visitor.ts

@@ -172,14 +172,19 @@ export class SWRVisitor extends ClientSideBaseVisitor<
         if (enabledInfinite) {
           codes.push(`use${pascalCase(
             o.node.name.value
-          )}Infinite(getKey: SWRInfiniteKeyLoader<${
-            o.operationResultType
+          )}Infinite(getKey: SWRInfiniteKeyLoader<${o.operationResultType}, ${
+            o.operationVariablesTypes
           }>, variables${optionalVariables ? '?' : ''}: ${
             o.operationVariablesTypes
           }, config?: SWRInfiniteConfigInterface<${o.operationResultType}>) {
-  return useSWRInfinite<${o.operationResultType}>(getKey, () => sdk.${
+  return useSWRInfinite<${o.operationResultType}>(
+    utilsForInfinite.generateGetKey<${o.operationResultType}, ${
+            o.operationVariablesTypes
+          }>(getKey),
+    utilsForInfinite.generateFetcher<${o.operationVariablesTypes}>(sdk.${
             o.node.name.value
-          }(variables), config);
+          }, variables),
+    config);
 }`)
         }
 
@@ -195,20 +200,30 @@ export class SWRVisitor extends ClientSideBaseVisitor<
       )
     }
     if (this._enabledInfinite) {
-      types.push(`export type SWRInfiniteKeyLoader<Data = any> = (
+      types.push(`export type SWRInfiniteKeyLoader<Data = unknown, Variables = unknown> = (
   index: number,
   previousPageData: Data | null
-) => string | any[] | null;`)
+) => Variables | null;`)
     }
 
     return `${types.join('\n')}
 export function getSdkWithHooks(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
   const sdk = getSdk(client, withWrapper);
 ${
-  autogenSWRKey
-    ? '  const genKey = <V extends Record<string, unknown> = Record<string, unknown>>(name: string, object: V = {} as V): SWRKeyInterface => [name, ...Object.keys(object).sort().map(key => object[key])];\n'
+  this._enabledInfinite
+    ? `  const utilsForInfinite = {
+    generateGetKey: <Data = unknown, Variables = unknown>(getKey: SWRInfiniteKeyLoader<Data, Variables>) => (pageIndex: number, previousData: Data | null) => {
+        const key = getKey(pageIndex, previousData)
+        return key ? [key] : key
+    },
+    generateFetcher: <Variables = unknown>(query: (...params: unknown[]) => unknown, variables?: Variables) => (...params) => query(Object.assign({}, variables, ...params))
+  }\n`
     : ''
-}  return {
+}${
+      autogenSWRKey
+        ? '  const genKey = <V extends Record<string, unknown> = Record<string, unknown>>(name: string, object: V = {} as V): SWRKeyInterface => [name, ...Object.keys(object).sort().map(key => object[key])];\n'
+        : ''
+    }  return {
     ...sdk,
 ${allPossibleActions.join(',\n')}
   };

tests/swr.spec.ts

@@ -285,12 +285,19 @@ export type SdkWithHooks = ReturnType<typeof getSdkWithHooks>;`
         `import useSWR, { useSWRInfinite, ConfigInterface as SWRConfigInterface, keyInterface as SWRKeyInterface, SWRInfiniteConfigInterface } from 'swr';`
       )
       expect(output).toContain(
-        `export type SWRInfiniteKeyLoader<Data = any> = (
+        `export type SWRInfiniteKeyLoader<Data = unknown, Variables = unknown> = (
   index: number,
   previousPageData: Data | null
-) => string | any[] | null;
+) => Variables | null;
 export function getSdkWithHooks(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
   const sdk = getSdk(client, withWrapper);
+  const utilsForInfinite = {
+    generateGetKey: <Data = unknown, Variables = unknown>(getKey: SWRInfiniteKeyLoader<Data, Variables>) => (pageIndex: number, previousData: Data | null) => {
+        const key = getKey(pageIndex, previousData)
+        return key ? [key] : key
+    },
+    generateFetcher: <Variables = unknown>(query: (...params: unknown[]) => unknown, variables?: Variables) => (...params) => query(Object.assign({}, variables, ...params))
+  }
   return {
     ...sdk,
     useFeed(key: SWRKeyInterface, variables?: FeedQueryVariables, config?: SWRConfigInterface<FeedQuery>) {
@@ -299,17 +306,23 @@ export function getSdkWithHooks(client: GraphQLClient, withWrapper: SdkFunctionW
     useFeed2(key: SWRKeyInterface, variables: Feed2QueryVariables, config?: SWRConfigInterface<Feed2Query>) {
       return useSWR<Feed2Query>(key, () => sdk.feed2(variables), config);
     },
-    useFeed2Infinite(getKey: SWRInfiniteKeyLoader<Feed2Query>, variables: Feed2QueryVariables, config?: SWRInfiniteConfigInterface<Feed2Query>) {
-      return useSWRInfinite<Feed2Query>(getKey, () => sdk.feed2(variables), config);
+    useFeed2Infinite(getKey: SWRInfiniteKeyLoader<Feed2Query, Feed2QueryVariables>, variables: Feed2QueryVariables, config?: SWRInfiniteConfigInterface<Feed2Query>) {
+      return useSWRInfinite<Feed2Query>(
+        utilsForInfinite.generateGetKey<Feed2Query, Feed2QueryVariables>(getKey),
+        utilsForInfinite.generateFetcher<Feed2QueryVariables>(sdk.feed2, variables),
+        config);
     },
     useFeed3(key: SWRKeyInterface, variables?: Feed3QueryVariables, config?: SWRConfigInterface<Feed3Query>) {
       return useSWR<Feed3Query>(key, () => sdk.feed3(variables), config);
     },
     useFeed4(key: SWRKeyInterface, variables?: Feed4QueryVariables, config?: SWRConfigInterface<Feed4Query>) {
       return useSWR<Feed4Query>(key, () => sdk.feed4(variables), config);
     },
-    useFeed4Infinite(getKey: SWRInfiniteKeyLoader<Feed4Query>, variables?: Feed4QueryVariables, config?: SWRInfiniteConfigInterface<Feed4Query>) {
-      return useSWRInfinite<Feed4Query>(getKey, () => sdk.feed4(variables), config);
+    useFeed4Infinite(getKey: SWRInfiniteKeyLoader<Feed4Query, Feed4QueryVariables>, variables?: Feed4QueryVariables, config?: SWRInfiniteConfigInterface<Feed4Query>) {
+      return useSWRInfinite<Feed4Query>(
+        utilsForInfinite.generateGetKey<Feed4Query, Feed4QueryVariables>(getKey),
+        utilsForInfinite.generateFetcher<Feed4QueryVariables>(sdk.feed4, variables),
+        config);
     }
   };
 }