@navios/react-query 0.1.0

package/src/__tests__/make-mutation.spec.mts

@@ -0,0 +1,140 @@
+import { create } from 'navios'
+import { makeNaviosFakeAdapter } from 'navios/testing'
+
+import { builder } from '@navios/common'
+
+import { describe, expect, it, vi } from 'vitest'
+import { z } from 'zod'
+
+import { makeMutation } from '../make-mutation.mjs'
+
+vi.mock('@tanstack/react-query', async (importReal) => {
+  const actual = await importReal<typeof import('@tanstack/react-query')>()
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      getQueryData: vi.fn(),
+      setQueryData: vi.fn(),
+      invalidateQueries: vi.fn(),
+      removeQueries: vi.fn(),
+    }),
+    useMutation: vi.fn((req) => ({
+      ...req,
+      mutateAsync: async (data: unknown) => {
+        try {
+          const res = await req.mutationFn(data)
+          await req.onSuccess?.(res, data)
+          return res
+        } catch (err) {
+          req.onError?.(err, data)
+          throw err
+        }
+      },
+      mutate: req.mutationFn,
+    })),
+  }
+})
+
+describe('makeMutation', () => {
+  const adapter = makeNaviosFakeAdapter()
+  const api = builder({})
+  api.provideClient(create({ adapter: adapter.fetch }))
+  const responseSchema = z.discriminatedUnion('success', [
+    z.object({ success: z.literal(true), test: z.string() }),
+    z.object({ success: z.literal(false), message: z.string() }),
+  ])
+  const endpoint = api.declareEndpoint({
+    method: 'POST',
+    url: '/test/$testId/foo/$fooId' as const,
+    requestSchema: z.object({
+      testId: z.string(),
+      fooId: z.string(),
+    }),
+    querySchema: z.object({ foo: z.string() }),
+    responseSchema,
+  })
+  adapter.mock('/test/1/foo/2', 'POST', () => {
+    return new Response(
+      JSON.stringify({
+        success: true,
+        test: 'test',
+      }),
+      {
+        status: 200,
+        statusText: 'OK',
+        headers: {
+          'content-type': 'application/json',
+        },
+      },
+    )
+  })
+
+  it('should just work', async () => {
+    const mutation = makeMutation(endpoint, {
+      processResponse: (data) => {
+        if (!data.success) {
+          throw new Error(data.message)
+        }
+        return data
+      },
+      onSuccess: (queryClient, data, variables) => {
+        expect(data).toMatchObject({
+          success: true,
+          test: 'test',
+        })
+        expect(variables).toMatchObject({
+          urlParams: {
+            testId: '1',
+            fooId: '2',
+          },
+          data: {
+            testId: '1',
+            fooId: '2',
+          },
+          params: {
+            foo: 'bar',
+          },
+        })
+      },
+
+      onError: (err) => {
+        console.log('onError', err)
+      },
+    })
+    // @ts-expect-error internal type
+    const mutationResult = mutation()
+    await mutationResult.mutateAsync({
+      urlParams: {
+        testId: '1',
+        fooId: '2',
+      },
+      data: {
+        testId: '1',
+        fooId: '2',
+      },
+      params: {
+        foo: 'bar',
+      },
+    })
+  })
+
+  it('should work with a key', async () => {
+    const mutation = makeMutation(endpoint, {
+      processResponse: (data) => {
+        if (!data.success) {
+          throw new Error(data.message)
+        }
+        return data
+      },
+      useKey: true,
+    })
+    const mutationResult = mutation({
+      fooId: '2',
+      testId: '1',
+    })
+    console.log('mutationResult', mutationResult)
+
+    // @ts-expect-error from mock
+    expect(mutationResult.mutationKey).toMatchObject(['test', '1', 'foo', '2'])
+  })
+})

package/src/__tests__/makeDataTag.spec.mts

@@ -0,0 +1,70 @@
+import { builder } from '@navios/common'
+
+import { QueryClient } from '@tanstack/react-query'
+import { describe, expect, it } from 'vitest'
+import { z } from 'zod'
+
+import { makeQueryOptions } from '../make-query-options.mjs'
+
+describe('makeDataTag', () => {
+  it('should return a string', () => {
+    const api = builder({})
+    const responseSchema = z.discriminatedUnion('success', [
+      z.object({ success: z.literal(true), test: z.string() }),
+      z.object({ success: z.literal(false), message: z.string() }),
+    ])
+    const endpoint = api.declareEndpoint({
+      method: 'GET',
+      url: '/test/$testId/foo/$fooId' as const,
+      responseSchema,
+    })
+
+    const result = makeQueryOptions(endpoint, {
+      processResponse(data) {
+        return data
+      },
+    })
+    expect(typeof result.queryKey.dataTag).toBe('function')
+    expect(
+      result.queryKey.dataTag({
+        urlParams: { testId: '1', fooId: 'bar' },
+      }),
+    ).toMatchInlineSnapshot(`
+      [
+        "test",
+        "1",
+        "foo",
+        "bar",
+        [],
+      ]
+    `)
+  })
+  it('should return a string with the correct format', () => {
+    const queryClient = new QueryClient()
+    const api = builder({})
+    const responseSchema = z.discriminatedUnion('success', [
+      z.object({ success: z.literal(true), test: z.string() }),
+      z.object({ success: z.literal(false), message: z.string() }),
+    ])
+    const endpoint = api.declareEndpoint({
+      method: 'GET',
+      url: '/test/$testId/foo/$fooId' as const,
+      responseSchema,
+    })
+
+    const result = makeQueryOptions(endpoint, {
+      processResponse(data) {
+        if (!data.success) {
+          throw new Error(data.message)
+        }
+        return data
+      },
+    })
+    expect(typeof result.queryKey.dataTag).toBe('function')
+    const queryKey = result.queryKey.dataTag({
+      urlParams: { testId: '1', fooId: 'bar' },
+    })
+
+    queryClient.setQueryData(queryKey, { success: true, test: 'bar' })
+  })
+})

package/src/__tests__/makeInfiniteQueryOptions.spec.mts

@@ -0,0 +1,45 @@
+import { builder } from '@navios/common'
+
+import { describe, expect, it } from 'vitest'
+import { z } from 'zod'
+
+import { makeInfiniteQueryOptions } from '../make-infinite-query-options.mjs'
+
+describe('makeInfiniteQueryOptions', () => {
+  const api = builder({})
+  const responseSchema = z.discriminatedUnion('success', [
+    z.object({ success: z.literal(true), test: z.string() }),
+    z.object({ success: z.literal(false), message: z.string() }),
+  ])
+  const endpoint = api.declareEndpoint({
+    method: 'GET',
+    url: '/test/$testId/foo/$fooId' as const,
+    querySchema: z.object({ foo: z.string().optional() }),
+    responseSchema,
+  })
+  it('should work with types', () => {
+    const makeOptions = makeInfiniteQueryOptions(
+      endpoint,
+      {
+        getNextPageParam: (lastPage) => ({
+          foo: 'test' in lastPage ? lastPage.test : undefined,
+        }),
+        processResponse: (data) => {
+          if (!data.success) {
+            throw new Error(data.message)
+          }
+          return data
+        },
+      },
+      {
+        select: (data) => data.pages.map((page) => page.test).flat(),
+      },
+    )
+    const options = makeOptions({
+      // @ts-expect-error it's internal type
+      urlParams: { testId: '1', fooId: '2' },
+      params: {},
+    })
+    expect(options).toBeDefined()
+  })
+})

package/src/__tests__/makeQueryOptions.spec.mts

@@ -0,0 +1,43 @@
+import { builder } from '@navios/common'
+
+import { describe, expect, it } from 'vitest'
+import { z } from 'zod'
+
+import { makeQueryOptions } from '../make-query-options.mjs'
+
+describe('makeQueryOptions', () => {
+  const api = builder({})
+  const responseSchema = z.discriminatedUnion('success', [
+    z.object({ success: z.literal(true), test: z.string() }),
+    z.object({ success: z.literal(false), message: z.string() }),
+  ])
+  const endpoint = api.declareEndpoint({
+    method: 'GET',
+    url: '/test/$testId/foo/$fooId' as const,
+    querySchema: z.object({ foo: z.string() }),
+    responseSchema,
+  })
+  it('should work with types', () => {
+    const makeOptions = makeQueryOptions(
+      endpoint,
+      {
+        processResponse: (data) => {
+          if (!data.success) {
+            throw new Error(data.message)
+          }
+          return data
+        },
+      },
+      {
+        select: (data) => data.test,
+      },
+    )
+    const options = makeOptions({
+      urlParams: { testId: '1', fooId: '2' },
+      params: {
+        foo: 'bar',
+      },
+    })
+    expect(options).toBeDefined()
+  })
+})

package/src/declare-client.mts

@@ -0,0 +1,215 @@
+import type {
+  AbstractEndpoint,
+  AnyEndpointConfig,
+  HttpMethod,
+  Util_FlatObject,
+} from '@navios/common'
+import type { InfiniteData, QueryClient } from '@tanstack/react-query'
+import type { AnyZodObject, z, ZodType } from 'zod'
+
+import type { ClientOptions, ProcessResponseFunction } from './types.mjs'
+import type { ClientInstance, ClientMutationArgs } from './types/index.mjs'
+
+import { makeInfiniteQueryOptions } from './make-infinite-query-options.mjs'
+import { makeMutation } from './make-mutation.mjs'
+import { makeQueryOptions } from './make-query-options.mjs'
+
+export interface ClientEndpoint<
+  Method = HttpMethod,
+  Url = string,
+  QuerySchema = unknown,
+  Response = ZodType,
+> {
+  method: Method
+  url: Url
+  querySchema?: QuerySchema
+  responseSchema: Response
+}
+
+export interface ClientQueryConfig<
+  Method = HttpMethod,
+  Url = string,
+  QuerySchema = AnyZodObject,
+  Response extends ZodType = ZodType,
+  Result = z.output<Response>,
+> extends ClientEndpoint<Method, Url, QuerySchema, Response> {
+  processResponse?: (data: z.output<Response>) => Result
+}
+
+export type ClientInfiniteQueryConfig<
+  Method = HttpMethod,
+  Url = string,
+  QuerySchema extends AnyZodObject = AnyZodObject,
+  Response extends ZodType = ZodType,
+  PageResult = z.output<Response>,
+  Result = InfiniteData<PageResult>,
+> = Required<ClientEndpoint<Method, Url, QuerySchema, Response>> & {
+  processResponse?: (data: z.output<Response>) => PageResult
+  select?: (data: InfiniteData<PageResult>) => Result
+  getNextPageParam: (
+    lastPage: PageResult,
+    allPages: PageResult[],
+    lastPageParam: z.infer<QuerySchema> | undefined,
+    allPageParams: z.infer<QuerySchema>[] | undefined,
+  ) => z.input<QuerySchema> | undefined
+  getPreviousPageParam?: (
+    firstPage: PageResult,
+    allPages: PageResult[],
+    lastPageParam: z.infer<QuerySchema> | undefined,
+    allPageParams: z.infer<QuerySchema>[] | undefined,
+  ) => z.input<QuerySchema>
+  initialPageParam?: z.input<QuerySchema>
+}
+
+export interface ClientMutationDataConfig<
+  Method extends 'POST' | 'PUT' | 'PATCH' | 'DELETE' =
+    | 'POST'
+    | 'PUT'
+    | 'PATCH'
+    | 'DELETE',
+  Url extends string = string,
+  RequestSchema = Method extends 'DELETE' ? never : AnyZodObject,
+  QuerySchema = unknown,
+  Response extends ZodType = ZodType,
+  ReqResult = z.output<Response>,
+  Result = unknown,
+  Context = unknown,
+  UseKey extends boolean = false,
+> extends ClientEndpoint<Method, Url, QuerySchema, Response> {
+  requestSchema?: RequestSchema
+  processResponse: ProcessResponseFunction<Result, ReqResult>
+  useContext?: () => Context
+  onSuccess?: (
+    queryClient: QueryClient,
+    data: NoInfer<Result>,
+    variables: Util_FlatObject<
+      ClientMutationArgs<Url, RequestSchema, QuerySchema>
+    >,
+    context: Context,
+  ) => void | Promise<void>
+  onError?: (
+    queryClient: QueryClient,
+    error: Error,
+    variables: Util_FlatObject<
+      ClientMutationArgs<Url, RequestSchema, QuerySchema>
+    >,
+    context: Context,
+  ) => void | Promise<void>
+  useKey?: UseKey
+}
+
+export function declareClient<Options extends ClientOptions>({
+  api,
+  defaults = {},
+}: Options): ClientInstance {
+  function query(config: ClientQueryConfig) {
+    const endpoint = api.declareEndpoint({
+      // @ts-expect-error we accept only specific methods
+      method: config.method,
+      url: config.url,
+      querySchema: config.querySchema,
+      responseSchema: config.responseSchema,
+    })
+
+    return makeQueryOptions(endpoint, {
+      ...defaults,
+      processResponse: config.processResponse ?? ((data) => data),
+    })
+  }
+
+  function queryFromEndpoint(
+    endpoint: AbstractEndpoint<AnyEndpointConfig>,
+    options?: {
+      processResponse?: (
+        data: z.output<AnyEndpointConfig['responseSchema']>,
+      ) => unknown
+    },
+  ) {
+    return makeQueryOptions(endpoint, {
+      ...defaults,
+      processResponse: options?.processResponse ?? ((data) => data),
+    })
+  }
+
+  function infiniteQuery(config: ClientInfiniteQueryConfig) {
+    const endpoint = api.declareEndpoint({
+      // @ts-expect-error we accept only specific methods
+      method: config.method,
+      url: config.url,
+      querySchema: config.querySchema,
+      responseSchema: config.responseSchema,
+    })
+    return makeInfiniteQueryOptions(endpoint, {
+      ...defaults,
+      processResponse: config.processResponse ?? ((data) => data),
+      getNextPageParam: config.getNextPageParam,
+      getPreviousPageParam: config.getPreviousPageParam,
+      initialPageParam: config.initialPageParam,
+    })
+  }
+
+  function infiniteQueryFromEndpoint(
+    endpoint: AbstractEndpoint<AnyEndpointConfig>,
+    options: {
+      processResponse?: (
+        data: z.output<AnyEndpointConfig['responseSchema']>,
+      ) => unknown
+      getNextPageParam: (
+        lastPage: z.infer<AnyEndpointConfig['responseSchema']>,
+        allPages: z.infer<AnyEndpointConfig['responseSchema']>[],
+        lastPageParam: z.infer<AnyEndpointConfig['querySchema']> | undefined,
+        allPageParams: z.infer<AnyEndpointConfig['querySchema']>[] | undefined,
+      ) => z.input<AnyEndpointConfig['querySchema']> | undefined
+      getPreviousPageParam?: (
+        firstPage: z.infer<AnyEndpointConfig['responseSchema']>,
+        allPages: z.infer<AnyEndpointConfig['responseSchema']>[],
+        lastPageParam: z.infer<AnyEndpointConfig['querySchema']> | undefined,
+        allPageParams: z.infer<AnyEndpointConfig['querySchema']>[] | undefined,
+      ) => z.input<AnyEndpointConfig['querySchema']>
+      initialPageParam?: z.input<AnyEndpointConfig['querySchema']>
+    },
+  ) {
+    return makeInfiniteQueryOptions(endpoint, {
+      ...defaults,
+      processResponse: options?.processResponse ?? ((data) => data),
+      getNextPageParam: options.getNextPageParam,
+      getPreviousPageParam: options?.getPreviousPageParam,
+      initialPageParam: options?.initialPageParam,
+    })
+  }
+
+  function mutation(config: ClientMutationDataConfig) {
+    const endpoint = api.declareEndpoint({
+      // @ts-expect-error We forgot about the DELETE method in original makeMutation
+      method: config.method,
+      url: config.url,
+      querySchema: config.querySchema,
+      requestSchema: config.requestSchema,
+      responseSchema: config.responseSchema,
+    })
+
+    return makeMutation(endpoint, {
+      processResponse: config.processResponse ?? ((data) => data),
+      useContext: config.useContext,
+      // @ts-expect-error We forgot about the DELETE method in original makeMutation
+      onSuccess: config.onSuccess,
+      // @ts-expect-error We forgot about the DELETE method in original makeMutation
+      onError: config.onError,
+      useKey: config.useKey,
+      ...defaults,
+    })
+  }
+
+  return {
+    // @ts-expect-error We simplified types here
+    query,
+    // @ts-expect-error We simplified types here
+    queryFromEndpoint,
+    // @ts-expect-error We simplified types here
+    infiniteQuery,
+    // @ts-expect-error We simplified types here
+    infiniteQueryFromEndpoint,
+    // @ts-expect-error We simplified types here
+    mutation,
+  }
+}

package/src/index.mts

@@ -0,0 +1,8 @@
+export * from './types/index.mjs'
+export * from './utils/mutation-key.creator.mjs'
+export * from './utils/query-key-creator.mjs'
+export * from './declare-client.mjs'
+export * from './make-mutation.mjs'
+export * from './make-infinite-query-options.mjs'
+export * from './make-query-options.mjs'
+export * from './types.mjs'

package/src/make-infinite-query-options.mts

@@ -0,0 +1,115 @@
+import type {
+  AbstractEndpoint,
+  AnyEndpointConfig,
+  UrlParams,
+} from '@navios/common'
+import type {
+  InfiniteData,
+  QueryClient,
+  UseInfiniteQueryOptions,
+  UseSuspenseInfiniteQueryOptions,
+} from '@tanstack/react-query'
+import type { z } from 'zod'
+
+import {
+  infiniteQueryOptions,
+  useInfiniteQuery,
+  useSuspenseInfiniteQuery,
+} from '@tanstack/react-query'
+
+import type { InfiniteQueryOptions } from './types.mjs'
+import type { ClientQueryArgs } from './types/index.mjs'
+
+import { queryKeyCreator } from './utils/query-key-creator.mjs'
+
+export function makeInfiniteQueryOptions<
+  Config extends AnyEndpointConfig,
+  Options extends InfiniteQueryOptions<Config>,
+  BaseQuery extends Omit<
+    UseInfiniteQueryOptions<ReturnType<Options['processResponse']>, Error, any>,
+    | 'queryKey'
+    | 'queryFn'
+    | 'getNextPageParam'
+    | 'initialPageParam'
+    | 'placeholderData'
+    | 'throwOnError'
+  >,
+>(
+  endpoint: AbstractEndpoint<Config>,
+  options: Options,
+  baseQuery: BaseQuery = {} as BaseQuery,
+) {
+  const config = endpoint.config
+  const queryKey = queryKeyCreator(config, options, true)
+
+  const processResponse = options.processResponse
+  const res = (
+    params: ClientQueryArgs,
+  ): Options['processResponse'] extends (...args: any[]) => infer Result
+    ? UseSuspenseInfiniteQueryOptions<
+        Result,
+        Error,
+        BaseQuery['select'] extends (...args: any[]) => infer T
+          ? T
+          : InfiniteData<Result>
+      >
+    : never => {
+    // @ts-expect-error TS2322 We know that the processResponse is defined
+    return infiniteQueryOptions({
+      // @ts-expect-error TS2322 We know the type
+      queryKey: queryKey.dataTag(params),
+      queryFn: async ({ signal, pageParam }) => {
+        let result
+        try {
+          result = await endpoint({
+            signal,
+            // @ts-expect-error TS2345 We bind the url params only if the url has params
+            urlParams: params.urlParams as z.infer<UrlParams<Config['url']>>,
+            params: {
+              ...('params' in params ? params.params : {}),
+              ...(pageParam as z.infer<Config['querySchema']>),
+            },
+          })
+        } catch (err) {
+          if (options.onFail) {
+            options.onFail(err)
+          }
+          throw err
+        }
+
+        return processResponse(result)
+      },
+      getNextPageParam: options.getNextPageParam,
+      initialPageParam:
+        options.initialPageParam ??
+        config.querySchema.parse('params' in params ? params.params : {}),
+      ...baseQuery,
+    })
+  }
+  res.queryKey = queryKey
+
+  res.use = (params: ClientQueryArgs) => {
+    return useInfiniteQuery(res(params))
+  }
+
+  res.useSuspense = (params: ClientQueryArgs) => {
+    return useSuspenseInfiniteQuery(res(params))
+  }
+
+  res.invalidate = (queryClient: QueryClient, params: ClientQueryArgs) => {
+    return queryClient.invalidateQueries({
+      // @ts-expect-error We add additional function to the result
+      queryKey: res.queryKey.dataTag(params),
+    })
+  }
+
+  res.invalidateAll = (queryClient: QueryClient, params: ClientQueryArgs) => {
+    return queryClient.invalidateQueries({
+      // @ts-expect-error We add additional function to the result
+      queryKey: res.queryKey.filterKey(params),
+      exact: false,
+    })
+  }
+
+  return res
+}