rocawear Posts - Answer Overflow

rocawear

Explore posts from servers

•Created by rocawear on 9/24/2024 in #questions

React Query data can be undefined

Hello, any idea how could i make it so i know my data is not undefined when doing like this using react-query:

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

const queriesValues = Object.values(queries)
const isPending = queriesValues.some((query) => query.isPending)
const isError = queriesValues.some((query) => query.isPending)

if(isPending){
  return <div>Loading...</div>
}

if(isError){
  return <div>Error...</div>
}
//data can be undefined
console.log(queries.query1.data)
console.log(queries.query2.data)

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

const queriesValues = Object.values(queries)
const isPending = queriesValues.some((query) => query.isPending)
const isError = queriesValues.some((query) => query.isPending)

if(isPending){
  return <div>Loading...</div>
}

if(isError){
  return <div>Error...</div>
}
//data can be undefined
console.log(queries.query1.data)
console.log(queries.query2.data)

this works perfectly fine:

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

if(queries.query1.isPending || queries.query2.isPending){
  return <div>Loading...</div>
}

if(queries.query1.isError || queries.query2.isError){
  return <div>Error...</div>
}

console.log(queries.query1.data)
console.log(queries.query2.data)

const queries = {
  query1: useGetSomething(),
  query2: useGetSomething2(),
};

if(queries.query1.isPending || queries.query2.isPending){
  return <div>Loading...</div>
}

if(queries.query1.isError || queries.query2.isError){
  return <div>Error...</div>
}

console.log(queries.query1.data)
console.log(queries.query2.data)

9 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 5/3/2024 in #questions

React Query hilight new data after mutation

Hello, after i mutate, how i display new data on my table with green background? I've tried to look into queryClient but not sure from where to get the new data. For example there is getMutationCache() but cant make it work. Any help is welcome!

2 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 3/16/2024 in #questions

T3 trpc v11

Hello, does T3 stack use trpc 11? Looked it and packet.json does not say version as number. Also is there coming some changes soon? Would like to use trpc on appdir and trpc documentation for v11 looks different than my newly generated T3 app

3 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 12/8/2023 in #questions

react hook form filters

Hello doing filters using react-hook-form but having problems to run my update function, i would like to be able to push to url after some field changes, currently my update function does not run unless i make button for it, also any ideas/tips welcome: More info and code on comments!

4 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 8/21/2023 in #questions

zod form

2 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/27/2023 in #questions

How to disable App Dir?

Upgraded our app from nextjs 12 > 13. I dont want to use app dir. I get this when i launch my app:

- warn You have enabled experimental feature (appDir) in next.config.js.

- warn You have enabled experimental feature (appDir) in next.config.js.

My next.config.js even has:

  experimental: {
    appDir: false,
  },

  experimental: {
    appDir: false,
  },

4 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/25/2023 in #questions

Prisma Schema

Hello doing feedback app, i am having problems to update my feedback info, i want to update name and questions. On comments i show schema and current route.

6 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/21/2023 in #questions

TypeScript problem

Hello, doing library code, took inspiration from ts-rest and trpc. I have problem, my input and output types are any. How could I make it so that those would be correct? https://tsplay.dev/WJpnlN Here my old version where it worked if it helps: https://tsplay.dev/w86bVm is my problem my Routes type?

export type Routes = Route<AnyZodObject, ZodTypeAny>[];

export type Routes = Route<AnyZodObject, ZodTypeAny>[];

3 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/17/2023 in #questions

react hook form generic form

Hello, I am upgrading our form components. We are using react hook form with zod resolver.we also use chakra UI. I want to make generic components for form, inputs etc. Does somebody have good resources how I could make them as generic as possible so I could use those on all forms on our app?

2 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 5/30/2023 in #questions

How to use discord.js in Nextjs app dir

Hello, I am trying to use discord.js in my app but getting alot of errors, is this even possible?:

import { getServerAuthStatus } from "@/lib/session";
import { z } from "zod";
import { giveRole } from "./actions";

export default async function Home() {
  const session = await getServerAuthStatus();
  console.log(session);

  async function handleSubmit(values: FormData) {
    "use server";

    const name = z.string().parse(values.get("name"));
    if (name) {
      console.log(name);
      await giveRole(name);
    }
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        {JSON.stringify(session)}

        <form action={handleSubmit}>
          <input type="text" name="name" />
          <button type="submit">Submit</button>
        </form>
      </div>
    </main>
  );
}

import { getServerAuthStatus } from "@/lib/session";
import { z } from "zod";
import { giveRole } from "./actions";

export default async function Home() {
  const session = await getServerAuthStatus();
  console.log(session);

  async function handleSubmit(values: FormData) {
    "use server";

    const name = z.string().parse(values.get("name"));
    if (name) {
      console.log(name);
      await giveRole(name);
    }
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        {JSON.stringify(session)}

        <form action={handleSubmit}>
          <input type="text" name="name" />
          <button type="submit">Submit</button>
        </form>
      </div>
    </main>
  );
}

actions.ts

"use server";

import { Client, GatewayIntentBits } from "discord.js";
import { config } from "@/lib/config";

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.on("ready", () => {
  console.log(`Bot logged in!`);
});

client.login(config.DISCORD_BOT_TOKEN);

export const giveRole = async (name: string) => {
  const user = client.users.cache.find(
    (user) => user.username.toLowerCase() === name.toLowerCase()
  );
  const guild = client.guilds.cache.get(config.DISCORD_SERVER_ID);
  const role = guild?.roles.cache.find(
    (role) => role.id === config.DISCORD_ROLE_ID
  );

  if (user && guild && role) {
    const member = guild.members.cache.get(user.id);
    if (member) {
      await member.roles.add(role);
    }
  }
};

"use server";

import { Client, GatewayIntentBits } from "discord.js";
import { config } from "@/lib/config";

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.on("ready", () => {
  console.log(`Bot logged in!`);
});

client.login(config.DISCORD_BOT_TOKEN);

export const giveRole = async (name: string) => {
  const user = client.users.cache.find(
    (user) => user.username.toLowerCase() === name.toLowerCase()
  );
  const guild = client.guilds.cache.get(config.DISCORD_SERVER_ID);
  const role = guild?.roles.cache.find(
    (role) => role.id === config.DISCORD_ROLE_ID
  );

  if (user && guild && role) {
    const member = guild.members.cache.get(user.id);
    if (member) {
      await member.roles.add(role);
    }
  }
};

12 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 3/13/2023 in #questions

Turbo repo React component library Storybook problem

I am doing OSS component library on turbo repo (https://github.com/loiste-ui/loiste-ui), having some problems to install storybook to my UI packet (https://github.com/loiste-ui/loiste-ui/tree/master/packages/loiste-ui). Feel free to contribute (install storybook to UI package for now) or help here! 🙂 What I have tried:

cd packages/loiste-ui 
OR
cd apps/docs
pnpx sb@next init

cd packages/loiste-ui 
OR
cd apps/docs
pnpx sb@next init

Accepted all of those on picture (Image 1). After installation it says:

To run your Storybook, type: pnpm run storybook

To run your Storybook, type: pnpm run storybook

That gives me wall of errors, for example and crash

Failed to load preset: "C:\\Users\\XXXX\\projektit\\omat\\loiste-ui\\node_modules\\@storybook\\builder-webpack5\\dist\\presets\\preview-preset.js"

Failed to load preset: "C:\\Users\\XXXX\\projektit\\omat\\loiste-ui\\node_modules\\@storybook\\builder-webpack5\\dist\\presets\\preview-preset.js"

https://media.discordapp.net/attachments/663478877355507784/1084856456681103430/image.png?width=842&height=162

1 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 2/25/2023 in #questions

Typescript question

I have code like this but I think my types are wrong because I cant access shape of zod schema on my class, also on comments I have some questions, any idea? I would like to be able to get schema on my database class correctly:

import z, { type Schema } from "zod";

export class Database<T> {
  public schema;
  constructor({ schema }: { schema: Schema<T> }) {
    this.schema = schema;
    //here i cant this.schema.shape.user;
    //console.log(this.schema.shape.user)

    //how to access user object from schema
    //this.schema.user
  }

  async create() {}
}

import z, { type Schema } from "zod";

export class Database<T> {
  public schema;
  constructor({ schema }: { schema: Schema<T> }) {
    this.schema = schema;
    //here i cant this.schema.shape.user;
    //console.log(this.schema.shape.user)

    //how to access user object from schema
    //this.schema.user
  }

  async create() {}
}

import { it } from "vitest";
import { z } from "zod";
import { Database } from "./index";

const userSchema = z.object({
  user: z.object({ id: z.number(), name: z.string() }),
});

//here i can userSchema.shape.user;

export type UserSchema = z.infer<typeof userSchema>;

it("Should create a database instance with correct schema", async () => {
  const database = new Database<UserSchema>({ schema: userSchema });
  //what should i do to be able to do database.user.create()
});

import { it } from "vitest";
import { z } from "zod";
import { Database } from "./index";

const userSchema = z.object({
  user: z.object({ id: z.number(), name: z.string() }),
});

//here i can userSchema.shape.user;

export type UserSchema = z.infer<typeof userSchema>;

it("Should create a database instance with correct schema", async () => {
  const database = new Database<UserSchema>({ schema: userSchema });
  //what should i do to be able to do database.user.create()
});

11 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 2/24/2023 in #questions

Promise-returning function provided to attribute where a void return was expected.

Hello, doing app with t3. I am using react-hook-form and I am getting error from handleSubmit: Promise-returning function provided to attribute where a void return was expected.eslint@typescript-eslint/no-misused-promises

<form onSubmit={handleSubmit(onSubmit)}>
....
</form>

<form onSubmit={handleSubmit(onSubmit)}>
....
</form>

I tried by doing like this but those does not work correctly:

void handleSubmit(onSubmit)

void handleSubmit(onSubmit)

() => handleSubmit(onSubmit)

() => handleSubmit(onSubmit)

How this should be fixed?

12 replies

TtRPC

•Created by rocawear on 1/7/2023 in #❓-help

tRPC sockets with react

Trying to make my React app work with socket with minimal server but getting error: "Uncaught TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null." at Object.useSubscription (createHooksInternal-9c1f8ad9.mjs:363:17) at createHooksInternal-9c1f8ad9.mjs:57:29 Current code on comments!

12 replies

TtRPC

•Created by rocawear on 11/29/2022 in #❓-help

trpc with headless cms

Hello, Is there any example with trpc and headless CMS or is there anypoint to use trpc for project that gets data from external source? For example existing api / headless CMS. And what would be the advantage over using for example react query and creating and getting data from api endpoint instead

2 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 11/22/2022 in #questions

t3 stack - Prisma user name from user id

Hello, I have Prisma schema like this and I would like to get username for the post. Now I have userId but how I get username from that? I have username on my database so I should be able to move it to the session? Using client provider with t3 stack and on my session I have now id and email but how to save it to database(?)

model User {
  id            String    @id @default(cuid())
  username      String?   @unique
  email         String?   @unique
  emailVerified DateTime?
  password      String
  image         String?
  posts         Post[]
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

model Post {
  id        String   @id @default(cuid())
  content   String
  user      User     @relation(fields: [userId], references: [id])
  userId    String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model User {
  id            String    @id @default(cuid())
  username      String?   @unique
  email         String?   @unique
  emailVerified DateTime?
  password      String
  image         String?
  posts         Post[]
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

model Post {
  id        String   @id @default(cuid())
  content   String
  user      User     @relation(fields: [userId], references: [id])
  userId    String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

My trpc mutation:

  create: protectedProcedure
    .input(newPostSchema)
    .mutation(async ({ input, ctx }) => {
      const post = await ctx.prisma.post.create({
        data: {
          userId: ctx.session.user.id,
          content: input.content,
        },
      });

      return post;
    }),
});

  create: protectedProcedure
    .input(newPostSchema)
    .mutation(async ({ input, ctx }) => {
      const post = await ctx.prisma.post.create({
        data: {
          userId: ctx.session.user.id,
          content: input.content,
        },
      });

      return post;
    }),
});

3 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 11/16/2022 in #questions

tRPC and existing api

Hello, I have external API that I use on my project. I need to hide my api key so I need to create api routes as wrapper (to run serverside). Could I just use trpc for it instead of the normal api route way on nextjs? So on trpc get external api and return result and client fetches from trpc

10 replies

Gaming

Programming