Json 👺 Posts - Answer Overflow

•Created by Json 👺 on 4/7/2025 in #❓-help

Exposing server-side caller and tRPC caller/helper through the same export?

Hey there 👋 I'm wondering if anyone thinks it could be unwise to expose the server-side caller and the tRPC caller through the same export.

// server.ts
import "server-only";
// ...
const caller = createCaller(createContext);

export const getQueryClient = cache(createQueryClient);

const helpers = createTRPCOptionsProxy({
  ctx: createContext,
  router: appRouter,
  queryClient: getQueryClient,
});

export const api = {
  caller,
  helpers,
};

// server.ts
import "server-only";
// ...
const caller = createCaller(createContext);

export const getQueryClient = cache(createQueryClient);

const helpers = createTRPCOptionsProxy({
  ctx: createContext,
  router: appRouter,
  queryClient: getQueryClient,
});

export const api = {
  caller,
  helpers,
};

I would prefer to use both through a single export, but I'm unsure if could be bad practice. Any thoughts are appreciated.

2 replies

TTCTheo's Typesafe Cult

•Created by Json 👺 on 3/21/2025 in #questions

t3.chat background texture?

Hey there 👋 any idea where I can find a simple texture such as the one used in t3.chat or motion.dev? I'd like one that works with both light and dark theme, but I am unsure where to begin looking. Any help is appreciated.

4 replies

•Created by Json 👺 on 2/8/2025 in #help

Correct way to determine the baseURL?

Hey there 👋 What is the recommended way in Next.js to determine the baseURL on the client? The docs tell us to create an environment variable BETTER_AUTH_URL. However, I don't see where the docs recommends that we use this env variable. On the client, the example used only shows an explicitly defined string. In Next.js, I have used the following:

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

However, I am inclined to follow a method usually used in tRPC. On the client, we typically do something like this to determine the URL:

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

So, should we really just be using a function like getBaseUrl() on the client to determine the auth location? Also, is BETTER_AUTH_URL used somewhere internally that I'm not seeing?

6 replies

•Created by Json 👺 on 2/1/2025 in #help

Has anyone used getSession() with tRPC callers?

I’m curious if anyone has used callers with the server-side validation. Because callers seem to exist outside of the global Next.js request scope, passing headers into getSession() doesn’t seem to be possible. Id like to use all of my data access functions on the server through my tRPC procedures, but my context which contains session info calls headers() outside of the request scope. Any experience/ideas?

14 replies

TTCTheo's Typesafe Cult

•Created by Json 👺 on 12/24/2024 in #questions

When is transcoding coming?

I am very excited that transcoding appears to be on the UT roadmap. Any idea when this might be?

2 replies

•Created by Json 👺 on 12/9/2024 in #help-and-questions

TypedSQL failing during build step

Hey there, I am having an issue where my SQL scripts run perfectly fine during developing but during my build step I am receiving the following error. I am unsure how to begin to debug this issue, so any suggestions are appreciated.

Failed to compile.

./node_modules/.prisma/client/sql/getPostReactionsNoUser.d.ts:6:39
Type error: Type expected.

  4 |  * @param  Post ID
  5 |  */
> 6 | export const getPostReactionsNoUser: (: string) => $runtime.TypedSql<getPostReactionsNoUser.Parameters, getPostReactionsNoUser.Result>
    |                                       ^
  7 |
  8 | export namespace getPostReactionsNoUser {
  9 |   export type Parameters = [string]

Failed to compile.

./node_modules/.prisma/client/sql/getPostReactionsNoUser.d.ts:6:39
Type error: Type expected.

  4 |  * @param  Post ID
  5 |  */
> 6 | export const getPostReactionsNoUser: (: string) => $runtime.TypedSql<getPostReactionsNoUser.Parameters, getPostReactionsNoUser.Result>
    |                                       ^
  7 |
  8 | export namespace getPostReactionsNoUser {
  9 |   export type Parameters = [string]

Here is the script in question: getPostReactionsNoUser.sql

-- @param {String} $1: Post ID
SELECT
    p."id" AS "postId",
    reaction_types."id" AS "reactionTypeId",
    CAST(COUNT(reactions."id") AS INTEGER) AS "reactionCount",
    reaction_types."emoji" AS "emoji",
    reaction_types."name" AS "emojiName",
    FALSE AS "reacted"
FROM posts p
LEFT JOIN reactions ON p."id" = reactions."post_id"
LEFT JOIN reaction_types ON reaction_types."id" = reactions."reaction_type_id"
WHERE p."id" = $1::uuid
GROUP BY p."id", reaction_types."id", reaction_types."name", reaction_types."emoji"
ORDER BY p."id", reaction_types."id";

-- @param {String} $1: Post ID
SELECT
    p."id" AS "postId",
    reaction_types."id" AS "reactionTypeId",
    CAST(COUNT(reactions."id") AS INTEGER) AS "reactionCount",
    reaction_types."emoji" AS "emoji",
    reaction_types."name" AS "emojiName",
    FALSE AS "reacted"
FROM posts p
LEFT JOIN reactions ON p."id" = reactions."post_id"
LEFT JOIN reaction_types ON reaction_types."id" = reactions."reaction_type_id"
WHERE p."id" = $1::uuid
GROUP BY p."id", reaction_types."id", reaction_types."name", reaction_types."emoji"
ORDER BY p."id", reaction_types."id";

And finally, because I suspect this could be related, I will include my build script:

"scripts": {
  "dev": "next dev --turbopack -H 0.0.0.0",
  "build": "npx prisma db push && npx prisma generate --sql && npx prisma db seed && next build",
  "start": "next start",
  "lint": "next lint"
},

"scripts": {
  "dev": "next dev --turbopack -H 0.0.0.0",
  "build": "npx prisma db push && npx prisma generate --sql && npx prisma db seed && next build",
  "start": "next start",
  "lint": "next lint"
},

5 replies

•Created by Json 👺 on 12/8/2024 in #help

Use deleteUser() without verification?

Is it possible to use the deleteUser() method without specifying sendDeleteAccountVerification? I am constructing a simple demo app and would like this use this method without this.

6 replies

•Created by Json 👺 on 12/6/2024 in #help-and-questions

Error P1012 when trying to use Prisma Postgres

Hey there 👋 I'm trying to use Prisma Postgres, but I am getting this error. I am unsure why the DATABASE_URL provided by Prisma would not work? Mine follows the format: prisma+postgres://accelerate.prisma-data.net/?api_key=..." but I get the following error when running npx prisma migrate dev --name init

Error code: P1012
error: Error validating datasource `db`: the URL must start with the protocol `postgresql://` or `postgres://`. To use a URL with protocol `prisma://`, you need to either enable Accelerate or the Data Proxy. Enable Accelerate via `prisma generate --accelerate` or the Data Proxy via `prisma generate --data-proxy.

Error code: P1012
error: Error validating datasource `db`: the URL must start with the protocol `postgresql://` or `postgres://`. To use a URL with protocol `prisma://`, you need to either enable Accelerate or the Data Proxy. Enable Accelerate via `prisma generate --accelerate` or the Data Proxy via `prisma generate --data-proxy.

8 replies

•Created by Json 👺 on 11/30/2024 in #bug-reports

Unable to use `mongodb` client

Hey there, I am having an issue using MongoDB with Better Auth. I have correctly initialized a mongodb client it seems, but Better Auth seems to be having an issue with it. If you have any pointers on how I might begin to debug this, I would greatly appreciate it. Error following authClient.signUp(). I can send the full error if needed by I am limited by Discord's post length here. Here the database is connected successfully.

 ✓ Compiled /api/auth/[...all] in 919ms

 ERROR   TypeError e.collection is not a function
          Better Auth
  at Object.findOne (.next/server/chunks/node_modules_better-auth_dist_c1259f._.js:4993:104)
  at Object.findUserByEmail (.next/server/chunks/node_modules_better-auth_dist_c1259f._.js:3693:29)
    ...
 POST /api/auth/sign-up/email?currentURL=http%3A%2F%2Flocalhost%3A3000%2F 500 in 1829ms
Pinged your deployment. You successfully connected to MongoDB!

 ✓ Compiled /api/auth/[...all] in 919ms

 ERROR   TypeError e.collection is not a function
          Better Auth
  at Object.findOne (.next/server/chunks/node_modules_better-auth_dist_c1259f._.js:4993:104)
  at Object.findUserByEmail (.next/server/chunks/node_modules_better-auth_dist_c1259f._.js:3693:29)
    ...
 POST /api/auth/sign-up/email?currentURL=http%3A%2F%2Flocalhost%3A3000%2F 500 in 1829ms
Pinged your deployment. You successfully connected to MongoDB!

/lib/auth/server.ts

import { betterAuth } from "better-auth";
import { mongodbAdapter } from "better-auth/adapters/mongodb";
import { client } from "@/lib/db/mongodb";

export const auth = betterAuth({
  database: mongodbAdapter(client),
  emailAndPassword: {
    enabled: true,
  },
});

import { betterAuth } from "better-auth";
import { mongodbAdapter } from "better-auth/adapters/mongodb";
import { client } from "@/lib/db/mongodb";

export const auth = betterAuth({
  database: mongodbAdapter(client),
  emailAndPassword: {
    enabled: true,
  },
});

/lib/db/mongodb.ts

const { MongoClient, ServerApiVersion } = require("mongodb");

const uri = process.env.MONGODB_URI as string;

export const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
});
async function run() {
  try {
    // Connect the client to the server (optional starting in v4.7)
    await client.connect();
    // Send a ping to confirm a successful connection
    await client.db("admin").command({ ping: 1 });
    console.log(
      "Pinged your deployment. You successfully connected to MongoDB!"
    );
  } finally {
    // Ensures that the client will close when you finish/error
    await client.close();
  }
}
run().catch(console.dir);

const { MongoClient, ServerApiVersion } = require("mongodb");

const uri = process.env.MONGODB_URI as string;

export const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
});
async function run() {
  try {
    // Connect the client to the server (optional starting in v4.7)
    await client.connect();
    // Send a ping to confirm a successful connection
    await client.db("admin").command({ ping: 1 });
    console.log(
      "Pinged your deployment. You successfully connected to MongoDB!"
    );
  } finally {
    // Ensures that the client will close when you finish/error
    await client.close();
  }
}
run().catch(console.dir);

3 replies

•Created by Json 👺 on 11/3/2024 in #help-and-questions

TypedSQL: Passing null values into raw SQL?

I am currently using an aggregate query that returns a boolean that is either true or false if some user (current user) has reacted to a given post. Here is the query (thanks Jon Harrell--if the code has issues it's likely because I've been modifying it):

-- @param {String} $1:Post ID
-- @param {String} $2:User ID
SELECT
    p."id" AS "postId",
    reaction_types."id" AS "reactionTypeId",
    CAST(COUNT(reactions."id") AS INTEGER) AS "reactionCount",
    reaction_types."emoji" AS "emoji",
    reaction_types."name" AS "emojiName",
    CASE
        WHEN COUNT(CASE WHEN reactions."user_id" = $2 THEN 1 END) > 0 THEN TRUE
        ELSE FALSE
    END AS "reacted"
FROM posts p
LEFT JOIN reactions ON p."id" = reactions."post_id"
LEFT JOIN reaction_types ON reaction_types."id" = reactions."reaction_type_id"
WHERE p."id" = $1::uuid
GROUP BY p."id", p."user_id", reaction_types."id", reaction_types."name", reaction_types."emoji"
ORDER BY p."id", reaction_types."id";

-- @param {String} $1:Post ID
-- @param {String} $2:User ID
SELECT
    p."id" AS "postId",
    reaction_types."id" AS "reactionTypeId",
    CAST(COUNT(reactions."id") AS INTEGER) AS "reactionCount",
    reaction_types."emoji" AS "emoji",
    reaction_types."name" AS "emojiName",
    CASE
        WHEN COUNT(CASE WHEN reactions."user_id" = $2 THEN 1 END) > 0 THEN TRUE
        ELSE FALSE
    END AS "reacted"
FROM posts p
LEFT JOIN reactions ON p."id" = reactions."post_id"
LEFT JOIN reaction_types ON reaction_types."id" = reactions."reaction_type_id"
WHERE p."id" = $1::uuid
GROUP BY p."id", p."user_id", reaction_types."id", reaction_types."name", reaction_types."emoji"
ORDER BY p."id", reaction_types."id";

And I want to be able to pass a null userId value if there is no current user into

prisma.$queryRawTyped(getPostReactionsSql(postId, userId))

prisma.$queryRawTyped(getPostReactionsSql(postId, userId))

but unfortunately this does not work with the type error

Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345)

Up until now, I've been passing two functions conditionally when userId is not known:

  const postReactions = (await prisma.$queryRawTyped(
    userId
      ? getPostReactionsSql(postId, userId)
      : getPostReactionsNoUserSql(postId),
  )) as getPostReactionsSql.Result[] | getPostReactionsNoUserSql.Result[];

  const postReactions = (await prisma.$queryRawTyped(
    userId
      ? getPostReactionsSql(postId, userId)
      : getPostReactionsNoUserSql(postId),
  )) as getPostReactionsSql.Result[] | getPostReactionsNoUserSql.Result[];

But this doesn't play well with the type system, hence the explicit type casting since the only accepted types don't include null or undefined. Is there a way to type this userId value as nullable/nullish, and execute this query without it? Any help is greatly appreciated!

3 replies

•Created by Json 👺 on 11/2/2024 in #bug-reports

Failed to get source map when using auth.api.getSession() during first request

Hey there 👋, I am having an issue getting my session on the server in a single request. Currently, it seems that two requests are being made for session data, and as for a brief moment, components accessing session data using useSession() render improperly. Has anyone had this issue before? Where can I begin to debug?

GET /api/auth/session 401 in 78ms
Failed to get source map: [Error: Unknown url scheme] { code: 'GenericFailure' }
GET /api/auth/session?currentURL=http%3A%2F%2Flocalhost%3A3000%2Fpost%2FW38VX0BvSrE 200 in 78ms

GET /api/auth/session 401 in 78ms
Failed to get source map: [Error: Unknown url scheme] { code: 'GenericFailure' }
GET /api/auth/session?currentURL=http%3A%2F%2Flocalhost%3A3000%2Fpost%2FW38VX0BvSrE 200 in 78ms

36 replies

•Created by Json 👺 on 11/1/2024 in #❓-help

Fetch once and never again?

Hey there 👋, I'm wanting to fetch some data reactionTypes once when my layout <MainLayout /> renders in Nextjs and never again because this data does not change. Currently, I have placed (what I think is) a headless component into my layout that accesses the query client then sets a staleTime: Infinity default on this specific query. Is this a dumb strategy? How might you do this differently?

"use client";

import { trpc } from "@/utils/trpc";
import { useQueryClient } from "@tanstack/react-query";
import { getQueryKey } from "@trpc/react-query";

export function TrpcMainLayoutDefaults() {
  const queryClient = useQueryClient();

  // Reaction Types
  const reactionTypesKey = getQueryKey(trpc.reaction.getTypes);
  queryClient.setQueryDefaults(reactionTypesKey, {
    staleTime: Infinity,
  });
  // I had originally prefetched, but it seems this just adds an unneeded request (understandably)
  // trpc.useUtils().reaction.getTypes.prefetch()

  // Other...

  return <></>;
}

"use client";

import { trpc } from "@/utils/trpc";
import { useQueryClient } from "@tanstack/react-query";
import { getQueryKey } from "@trpc/react-query";

export function TrpcMainLayoutDefaults() {
  const queryClient = useQueryClient();

  // Reaction Types
  const reactionTypesKey = getQueryKey(trpc.reaction.getTypes);
  queryClient.setQueryDefaults(reactionTypesKey, {
    staleTime: Infinity,
  });
  // I had originally prefetched, but it seems this just adds an unneeded request (understandably)
  // trpc.useUtils().reaction.getTypes.prefetch()

  // Other...

  return <></>;
}

2 replies

•Created by Json 👺 on 10/21/2024 in #❓-help

Opinionated help: Where to place data access functions with respect to tRPC router(s)?

Hey there 👋 I'm currently trying to decide where to place my data access functions with respect to my tRPC routers. Currently, I have them placed at src/data-access/post/mutate-thing.ts, and I am wanting to move them into a folder structure like this: src/server/routers/post/functions/mutate-thing.ts but this feels a bit too nested (maybe not a bad thing) and for someone new to my codebase, this might make it difficult to find these functions. My routers are all obviously defined at src/server/routers, and I import my data access functions directly into each procedure within each router. Should I leave these data functions where they are at?

2 replies

•Created by Json 👺 on 10/14/2024 in #❓-help

Dynamically generate url for httpBatchLink

Hey there 👋 is it possible to generate a url for httpBatchLink instead of hardcoding one? I attempted the below code, but this doesn't work. Understandably, the fallback value is used for url each time the component mounts. I believe that I wouldn't even need a useEffect if I wasn't using Next, as I could directly grab these values from window.location, but since I'm using SSR, this code doesn't make it through the SSR pass.

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useEffect, useState } from "react";
import { trpc } from "@/utils/trpc";
import SuperJSON from "superjson";

export function TRPCQueryClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      setUrl(`${protocol}//${hostname}:${port}/api/trpc`);
    }
  }, []);

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: url ?? "http://localhost:3000/api/trpc", // Fallback in case url is not ready,
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          transformer: SuperJSON,
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useEffect, useState } from "react";
import { trpc } from "@/utils/trpc";
import SuperJSON from "superjson";

export function TRPCQueryClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      setUrl(`${protocol}//${hostname}:${port}/api/trpc`);
    }
  }, []);

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: url ?? "http://localhost:3000/api/trpc", // Fallback in case url is not ready,
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          transformer: SuperJSON,
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}

3 replies

•Created by Json 👺 on 9/16/2024 in #❓-help

How to get pageParam from useInfiniteQuery()?

How would I write a tRPC call equivalent to this traditional useInfiniteQuery? My primary concern here is that I need to pass in a cursor to my procedure, and upon each successive query I need to update this cursor for the next call.

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = useInfiniteQuery({
    queryKey: ["profile-posts", username],
    queryFn: ({ pageParam }) =>
      kyInstance
        .get(
          `/api/profiles/${username}/posts`,
          pageParam ? { searchParams: { cursor: pageParam } } : {},
        )
        .json<TProfilePostsPage>(),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = useInfiniteQuery({
    queryKey: ["profile-posts", username],
    queryFn: ({ pageParam }) =>
      kyInstance
        .get(
          `/api/profiles/${username}/posts`,
          pageParam ? { searchParams: { cursor: pageParam } } : {},
        )
        .json<TProfilePostsPage>(),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

Maybe it should be something like this?

  const [nextCursor, setNextCursor] = useState<string | null>(null)

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = trpc.getProfilePosts.useInfiniteQuery({ username, cursor: nextCursor }, {
    queryKey: ["profile-posts", username],
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => {
      setNextCursor(lastPage.nextCursor)
      return lastPage.nextCursor
    },
  });

  const [nextCursor, setNextCursor] = useState<string | null>(null)

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = trpc.getProfilePosts.useInfiniteQuery({ username, cursor: nextCursor }, {
    queryKey: ["profile-posts", username],
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => {
      setNextCursor(lastPage.nextCursor)
      return lastPage.nextCursor
    },
  });

2 replies

TTCTheo's Typesafe Cult

•Created by Json 👺 on 9/14/2024 in #questions

uploadthing replacing name and adding customId in middleware fails to run

This middleware does not run, despite this being close to what is provided in the documentation for changing file names and adding customIds (https://docs.uploadthing.com/file-routes#middleware). Logging the error provided by useUploadThing()'s onUploadError gives UploadThingError: Failed to run middleware... Caused by: Object { … }

    .middleware(async ({ req, files }) => {
      // This code runs on your server before upload
      const { user } = await validateRequest();

      // If you throw, the user will not be able to upload
      if (!user) throw new UploadThingError("Unauthorized");

      // Override file name and add customId
      const fileOverrides = files.map((file) => {
        const newName = uniqueNamesGenerator({
          dictionaries: [adjectives, animals, colors],
          length: 4,
        });
        const uuid = crypto.randomUUID();
        return { ...file, name: newName, customId: uuid };
      });

      // Whatever is returned here is accessible in onUploadComplete as `metadata`
      // Return userId to be used in onUploadComplete
      return { userId: user.id, [UTFiles]: fileOverrides };
      // return { userId: user.id };
    })

    .middleware(async ({ req, files }) => {
      // This code runs on your server before upload
      const { user } = await validateRequest();

      // If you throw, the user will not be able to upload
      if (!user) throw new UploadThingError("Unauthorized");

      // Override file name and add customId
      const fileOverrides = files.map((file) => {
        const newName = uniqueNamesGenerator({
          dictionaries: [adjectives, animals, colors],
          length: 4,
        });
        const uuid = crypto.randomUUID();
        return { ...file, name: newName, customId: uuid };
      });

      // Whatever is returned here is accessible in onUploadComplete as `metadata`
      // Return userId to be used in onUploadComplete
      return { userId: user.id, [UTFiles]: fileOverrides };
      // return { userId: user.id };
    })

1 replies

•Created by Json 👺 on 8/28/2024 in #help-and-questions

Complicated groupBy query

Hey there, I am attempting to do something with Prisma that may be undoable. I am still very new to web dev and Prisma, so be aware I don't doubt I'm missing something obvious here. I would like to use post.findMany() to find posts for a specific user, but in this query I would like to include the number of reactions associated with a post for a kind of reactionType. In my project, I am using emoji reactions on posts, and I need to return the number of reactions per emoji type (reactionType). However, I am at a loss for how to do this without many queries per request. Using groupBy() works if I grab the posts first and then use the post.id of each post...

prisma.reaction.groupBy({ 
  by: "reactionTypeId",
  where: { postId: { in: postList } },
  _count: true,
})

prisma.reaction.groupBy({ 
  by: "reactionTypeId",
  where: { postId: { in: postList } },
  _count: true,
})

^ This returns the following:

[
  { _count: 1, reactionTypeId: 'U+1FAE0' },
  { _count: 2, reactionTypeId: 'U+2764' }
]

[
  { _count: 1, reactionTypeId: 'U+1FAE0' },
  { _count: 2, reactionTypeId: 'U+2764' }
]

...and then merging the results from this with the original posts list, but this method is fairly complicated and I still haven't solved how to include a boolean value which indicates whether or not the current user has reacted to this post with a given emoji/reactionType... this would require additional queries. I think the ideal structure would be an object called reactionTypes of the following type appended to the post object:

type ReactionType = {
  [key: string]: {
    id: string,
    reacted: boolean
  }
}

type ReactionType = {
  [key: string]: {
    id: string,
    reacted: boolean
  }
}

... where the key here is the id of the reactionType like "U+2764" which is the unicode for a red heart emoji. Of course, I don't exactly need this format, I just need this data 🙂 (i.e., reacted boolean, count number) If anyone has thought about how I might be best include this reaction data, I would greatly appreciate it. I've been struggling for hours on this. For schema-related details, see the below schema.prisma (comment)

7 replies