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: 5d7ae4e

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 29, 2024 5:21am

[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
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

[psteinroe]

thanks for your effort @toki-developer! appreciate it a lot, but the solution here is not as straightforward as it seems to be.

the mutation hooks should not need the transformer to be passed. that's the hard part here: All mutations have to work on all queries with or without a transformer being applied to a query. Any query with a transformer should behave the same way as any other query but just return a transformed result.

[toki-developer]

@psteinroe

Thanks for the feedback! I agree that the current solution isn't optimal. I'll look into alternative approaches.
I believe the cache is stored per table, not per query. Instead of passing a transformer as an argument to mutations, and also instead of passing it as an argument to queries, we could configure transformers on a per-table basis. This way, any query with a transformer would behave consistently.

If you have any better approaches in mind, I would be grateful if you could share them with me.🙇