Omar-7ioo
Omar-7ioo
PostsComments
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 10/19/2024 in #questions
What is the standard way to fetch on RSC
create t3 app using App Router uses prefetch and hydrate client by default but why not use the caller instead? What is the benefit of prefetch? 
export default async function Home(){
void api.post.getLatest.prefetch();
return <HydrateClient>
...
<View/>
...
</HydrateClient>
}
export default async function Home(){
void api.post.getLatest.prefetch();
return <HydrateClient>
...
<View/>
...
</HydrateClient>
}
export default async function Home(){
const posts = await caller.post.getLatest();
return <>
...
  <View posts={posts} />
...
</>
}
export default async function Home(){
const posts = await caller.post.getLatest();
return <>
...
  <View posts={posts} />
...
</>
}
4 replies
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 2/24/2024 in #questions
Static IP Address
I'm working as a seller in a company that provide API's for developers, it allows access to the API if you provided one. The issue that I'm calling these API from a local machine and my IP changes all the time and I have to open a new ticket every time so I provide the new IP address. - Is there a way to have a static IP address? - Is there a workaround? - do I have to buy a static IP address? - Is there a service that provide what I want? The app fetches the API and extract that data into a JSON file so I can do operations on it. (Node.js)
3 replies
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 11/7/2023 in #questions
Returning new Response
No description
4 replies
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 11/6/2023 in #questions
TRPC pass res to ctx using app router
I used the template provided by trpc, ctx doesn't contain req or res. I managed to pass the req but couldn't figure out the res. Create Context: 
/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = async (opts: {
  req: NextRequest;
  // res: NextResponse;
}) => {
  // Fetch stuff that depends on the request

  const innerContext = await createInnerTRPCContext({
    headers: opts.req.headers,
  });

  return {
    ...innerContext,
    req: opts.req,
  };
};
/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = async (opts: {
  req: NextRequest;
  // res: NextResponse;
}) => {
  // Fetch stuff that depends on the request

  const innerContext = await createInnerTRPCContext({
    headers: opts.req.headers,
  });

  return {
    ...innerContext,
    req: opts.req,
  };
};
Handler 
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { type NextRequest } from "next/server";

import { env } from "~/env.mjs";
import { appRouter } from "~/server/api/root";
import { createTRPCContext } from "~/server/api/trpc";

const handler = (req: NextRequest) => {
  return fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
            );
          }
        : undefined,
  });
};

export { handler as GET, handler as POST };
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { type NextRequest } from "next/server";

import { env } from "~/env.mjs";
import { appRouter } from "~/server/api/root";
import { createTRPCContext } from "~/server/api/trpc";

const handler = (req: NextRequest) => {
  return fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
            );
          }
        : undefined,
  });
};

export { handler as GET, handler as POST };
1 replies
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 9/1/2023 in #questions
Zod overrides react-hook-form validation
I have the following form scheme. When I specify rules={{required: true}} on the field it doesn't work because of zod validation scheme. 
const trendyolFormScheme = z.object({
  brand: z.string().optional(),
  attributes: z.array(
    z
      .object({
        attributeId: z.number(),
        customAttributeValue: z.string().optional(),
        attributeValueId: z.number().optional(),
      })
      .optional(),
  ),
});
const trendyolFormScheme = z.object({
  brand: z.string().optional(),
  attributes: z.array(
    z
      .object({
        attributeId: z.number(),
        customAttributeValue: z.string().optional(),
        attributeValueId: z.number().optional(),
      })
      .optional(),
  ),
});
I want to be able to override Zod or being able to make field required based on api response (later on).
8 replies
TTCTheo's Typesafe Cult
Created by Omar-7ioo on 9/1/2023 in #questions
React-hook-form fields based on API call.
I hit an API to get fields for a product. The field properties usually get defined before with Zod. The problem is if the API got changed it won't be in sync. Example of the res data: 
{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}
{
  "id": 766,
  "name": "Kapak & Kılıf",
  "displayName": "Kapak & Kılıf",
  "categoryAttributes": [
    {
      "allowCustom": true,
      "attribute": { "id": 47, "name": "Renk" },
      "attributeValues": [],
      "categoryId": 766,
      "required": true,
      "varianter": false,
      "slicer": true
    },
    {
      "allowCustom": false,
      "attribute": { "id": 14, "name": "Materyal" },
      "attributeValues": [
        { "id": 99, "name": "Polyester" },
        { "id": 85, "name": "Hakiki Deri" },
        { "id": 103, "name": "Silikon" },
        { "id": 105, "name": "Suni Deri" },
        { "id": 96, "name": "Plastik" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    },
    {
      "allowCustom": false,
      "attribute": { "id": 32, "name": "Model" },
      "attributeValues": [
        { "id": 865, "name": "Arka Kapak" },
        { "id": 866, "name": "Cüzdan Kılıf" },
        { "id": 867, "name": "Çerçeve" }
      ],
      "categoryId": 766,
      "required": false,
      "varianter": false,
      "slicer": false
    }
  ]
}
categoryAttributes.index.attribute.name should be the field name I suppose but how can I assign it to react-hook-form. I can't tell the name or if it required so I can make it as required in the form since it is an API call. I know the shape of the response only. Is there a way around or I need to hard type them in the zod scheme and react-hook-form?
1 replies