Generalize TypeScript and add typings to getPage

framework/spree/api/endpoints/checkout/index.ts

@@ -1,10 +1,9 @@
 import { createEndpoint } from '@commerce/api'
-import type { CommerceAPI } from '@commerce/api'
+import type { GetAPISchema, CommerceAPI } from '@commerce/api'
-import type { GetAPISchema } from '@commerce/api'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 import type { CheckoutSchema } from '@commerce/types/checkout'
 import checkout from './checkout'
-import { SpreeApiProvider } from '../..'
+import type { SpreeApiProvider } from '../..'
 
 export type CheckoutAPI = GetAPISchema<
   CommerceAPI<SpreeApiProvider>,

framework/spree/api/index.ts

@@ -1,4 +1,4 @@
-import type { APIProvider, CommerceAPIConfig } from '@commerce/api'
+import type { CommerceAPI, CommerceAPIConfig } from '@commerce/api'
 import { getCommerceApi as commerceApi } from '@commerce/api'
 import createApiFetch from './utils/create-api-fetch'
 
@@ -10,9 +10,7 @@ import getAllProductPaths from './operations/get-all-product-paths'
 import getAllProducts from './operations/get-all-products'
 import getProduct from './operations/get-product'
 
-export interface SpreeApiConfig extends CommerceAPIConfig {
+export interface SpreeApiConfig extends CommerceAPIConfig {}
-  fetch: any // Using any type, because CommerceAPIConfig['fetch'] cannot be extended from Variables = any to SpreeSdkVariables
-}
 
 const config: SpreeApiConfig = {
   commerceUrl: '',
@@ -33,9 +31,15 @@ const operations = {
   getProduct,
 }
 
-export const provider: APIProvider = { config, operations }
+export const provider = { config, operations }
 
-export type SpreeApiProvider = APIProvider
+export type SpreeApiProvider = typeof provider
 
-export const getCommerceApi = (customProvider: APIProvider = provider) =>
+export type SpreeApi<P extends SpreeApiProvider = SpreeApiProvider> =
-  commerceApi(customProvider)
+  CommerceAPI<P>
+
+export function getCommerceApi<P extends SpreeApiProvider>(
+  customProvider: P = provider as any
+): SpreeApi<P> {
+  return commerceApi(customProvider)
+}

framework/spree/api/operations/get-page.ts

@@ -1,3 +1,7 @@
+import type { OperationOptions } from '@commerce/api/operations'
+import type { GetPageOperation } from '@commerce/types/page'
+import type { SpreeApiConfig } from '..'
+
 export type Page = any
 export type GetPageResult = { page?: Page }
 
@@ -6,8 +10,33 @@ export type PageVariables = {
 }
 
 export default function getPageOperation() {
-  function getPage(): Promise<GetPageResult> {
+  async function getPage<T extends GetPageOperation>(opts: {
+    variables: T['variables']
+    config?: Partial<SpreeApiConfig>
+    preview?: boolean
+  }): Promise<T['data']>
+
+  async function getPage<T extends GetPageOperation>(
+    opts: {
+      variables: T['variables']
+      config?: Partial<SpreeApiConfig>
+      preview?: boolean
+    } & OperationOptions
+  ): Promise<T['data']>
+
+  async function getPage<T extends GetPageOperation>({
+    url,
+    variables,
+    config,
+    preview,
+  }: {
+    url?: string
+    variables: T['variables']
+    config?: Partial<SpreeApiConfig>
+    preview?: boolean
+  }): Promise<T['data']> {
     return Promise.resolve({})
   }
+
   return getPage
 }

framework/spree/api/utils/create-api-fetch.ts

@@ -8,17 +8,19 @@ import type {
   JsonApiSingleResponse,
 } from '@spree/storefront-api-v2-sdk/types/interfaces/JsonApi'
 import getSpreeSdkMethodFromEndpointPath from '../../utils/get-spree-sdk-method-from-endpoint-path'
-import { SpreeSdkVariables } from 'framework/spree/types'
 import SpreeSdkMethodFromEndpointPathError from 'framework/spree/errors/SpreeSdkMethodFromEndpointPathError'
 import { GraphQLFetcher, GraphQLFetcherResult } from '@commerce/api'
 import createCustomizedFetchFetcher from '../../utils/create-customized-fetch-fetcher'
 import fetch, { Request } from 'node-fetch'
 
-const createApiFetch: (
+export type CreateApiFetch = (
   getConfig: () => SpreeApiConfig
-) => GraphQLFetcher<GraphQLFetcherResult<any>, SpreeSdkVariables> = (
+) => GraphQLFetcher<GraphQLFetcherResult<any>, any>
-  _getConfig
+
-) => {
+// TODO: GraphQLFetcher<GraphQLFetcherResult<any>, any> should be GraphQLFetcher<GraphQLFetcherResult<any>, SpreeSdkVariables>.
+// But CommerceAPIConfig['fetch'] cannot be extended from Variables = any to SpreeSdkVariables.
+
+const createApiFetch: CreateApiFetch = (_getConfig) => {
   const client = makeClient({
     host: requireConfigValue('apiHost') as string,
     fetcherType: 'custom',

framework/spree/index.tsx

@@ -13,9 +13,8 @@ import { requireConfigValue } from './isomorphic-config'
 
 export type SpreeProps = {
   children: ReactNode
-  provider: Provider
+  locale: string
-  config: SpreeConfig
+}
-} & SpreeConfig
 
 export const spreeCommerceConfigDefaults: CommerceConfig = {
   locale: requireConfigValue('defaultLocale') as string,
@@ -26,7 +25,7 @@ export type SpreeConfig = CommerceConfig
 
 export function CommerceProvider({ children, ...restProps }: SpreeProps) {
   return (
-    <CoreCommerceProvider
+    <CoreCommerceProvider<Provider>
       provider={provider}
       config={{ ...spreeCommerceConfigDefaults, ...restProps }}
     >