Feat: Add transformer option to use-query

[toki-developer]

Issue

#245

Overview

I've added a transformer option to use-query. This allows you to transform data, such as converting from snake_case to camelCase.

Capture

Without Transformer	With Transformer	Transformer Arguments

CODE: snakeToCamel function

import camelcaseKeys from "camelcase-keys";

export type SnakeToCamelCase<S extends string> =
  S extends `${infer T}_${infer U}`
    ? `${Lowercase<T>}${Capitalize<SnakeToCamelCase<U>>}`
    : S;
export type SnakeToCamelCaseNested<T> = T extends (infer U)[]
  ? SnakeToCamelCaseNested<U>[]
  : T extends object
    ? {
        [K in keyof T as SnakeToCamelCase<K & string>]: SnakeToCamelCaseNested<
          T[K]
        >;
      }
    : T;

export const snakeToCamel = <
  T extends Record<string, unknown> | readonly Record<string, unknown>[],
>(
  request: T
) => camelcaseKeys(request) as unknown as SnakeToCamelCaseNested<T>;

Without Transformer	With Transformer

Additional Notes

I'm a junior engineer. This is my first contribution to an open-source project. I'm eager to receive feedback on my work. I'm very interested in Supabase and would love to work on other issues if there are any.

[changeset-bot]

⚠️ No Changeset found

Latest commit: fe371df

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
supabase-cache-helpers	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 1:33pm

[vercel]

@toki-developer is attempting to deploy a commit to the psteinroe's projects Team on Vercel.

A member of the Team first needs to authorize it.

[psteinroe]

hey @toki-developer, welcome to GitHub. its a pleasure to have your first contribution in my repository.

did you test if this works with cache updates? I believe the change has to be done at a lower level to ensure the automatic revalidations work.

[toki-developer]

Thank you for the review, @psteinroe. I'll look into it!

I believe the change has to be done at a lower level to ensure the automatic revalidations work.

I will conduct my own research, but if you could identify any specific files, I would be most grateful.

Cached data is also transformed！

detail

const res = queryClient.getQueryCache().getAll()
console.log(res[0].state.data)

[toki-developer]

did you test if this works with cache updates?

I understand what this message means.
I should be able to register createdAt instead of created_at!

upsertItem({
      "id": 33,
      "title": "じゃがバターテスト",
      "created_at": "2024-09-01T01:26:39.35955+00:00"
    })

[psteinroe]

I meant that it should be possible to use useUpdateMutation to update a useQuery that has a transformer set.

[toki-developer]

@psteinroe

I meant that it should be possible to use useUpdateMutation to update a useQuery that has a transformer set.

Thank you！
By aligning the select value of the queryKey generated by encode(query, false) with the transformed field, I've achieved successful cache updates.

I'm going to experiment with passing a transformer as an argument to the encode function.

[toki-developer]

@psteinroe
Instead of altering the queryKey, I'm considering adding a transformer as an argument to a different hook. What are your thoughts on this approach?

Target hooks

• mutate
  • useUpdateMutation
  • useUpsertMutation
  • useInsertMutation
• subscribe
  • useSubscription
  • useSubscriptionQuery
• cache
  • useMutateItem
  • useUpsertItem