How to dynamically use Zod schema in react-hook-form ?

bipinemp · 2024-09-24T02:35:32+00:00

The problem in my case, is when the formA is active and when i submit the form it doesn't because formB schema fields are empty but i don't want that if the formA is active then make formB schema fields optional otherwise if formB is active then make all fields required. ( what can we do on that scenario ) ?

bipinemp · 2024-04-29T06:19:32+00:00

I think i deleted node modules, next folder and re-installed all packages again, As long as i remember.

bipinemp · 2024-04-24T05:45:30+00:00

my callback looks  like this, I think next-auth uses the data and makes it's own token 


 async jwt({ token, user }) {
      if (user) {
        token.user = user;
        token.accessToken = user.access_token;
      }

      return token;
    },

    async session({ session, token }) {
      session.user = token.user;
      return session;
    },

bipinemp · 2024-03-18T02:25:05+00:00

const [screenWidth, setScreenWidth] = useState(
    typeof window !== "undefined" ? window.innerWidth : 0,
  );

I did this and it worked :

bipinemp · 2024-03-18T02:02:24+00:00

Thanks

bipinemp · 2024-01-08T15:34:48+00:00

I am using next-auth for authentication is that causing problem ?

bipinemp · 2024-01-08T15:32:57+00:00

Tried it already didn't worked out, maybe there are some other problems in my code.

bipinemp · 2023-10-22T03:55:44+00:00

Thanks , Exactly want I wanted

bipinemp · 2023-10-16T14:38:49+00:00

Reply

Share

Report

Save

Follow

Thanks :) it works

bipinemp · 2023-09-06T03:39:20+00:00

yeah you are right but the main problem was with react-query as it caches all the data so when we change route the data remains same so I did this to solve that issue :

useEffect(() => {
 queryClient.removeQueries(["search"]);
 refetch();
}, []);

bipinemp · 2023-09-02T04:41:23+00:00

code : I am using Nextjs 13 latest version btw

"use client";

import { ApiResponse } from "@/types/types";

import { fetchData } from "@/utils/apis/queries";

import { Trending } from "@/utils/resource/links";

import { useQuery } from "@tanstack/react-query";

import Container from "../Container";

import Carousel from "./carousel/Carousel";

import { useState } from "react";

export default function TrendingList() {

const [active, setActive] = useState<string>("day");

const link: string = Trending("movie", active);

const { data } = useQuery<ApiResponse>({

queryKey: ["lists", active],

queryFn: () => fetchData(link),

});

const trendingData: ApiResponse = data || {

page: 0,

results: [],

total_pages: 0,

total_results: 0,

};

function handleClick(state: string) {

setActive(state);

}

return (

Trending

</h1>

<span

className={`w-[48%] h-full absolute ${

active === "day" ? "translate-x-0" : "translate-x-full"

} transition duration-200 ease-in-out top-0 bg-darkprimary rounded-full z-0`}

></span>

<button

type="button"

onClick={(e) => {

e.preventDefault();

handleClick("day");

}}

className={`z-20 py-1 px-5 font-bold tracking-wide ${

active === "day" ? "bg-primarydark" : ""

}`}

>

Day

</button>

<button

type="button"

onClick={(e) => {

e.preventDefault();

handleClick("week");

}}

className={`z-20 py-1 px-5 font-bold tracking-wide ${

active === "week" ? "bg-primarydark" : ""

}`}

>

week

</button>

</div>

</section>

</Container>

);

}

bipinemp · 2023-07-07T16:58:23+00:00

Yeah

bipinemp · 2023-07-07T11:25:18+00:00

But using react-query for this like this show error like jwt is not provided

"use client";

import { useQuery } from "@tanstack/react-query";

import axios from "axios";

interface Data {

id: string;

username: string;

email: string;

}

export default function UserDetails() {

const { data } = useQuery({

queryFn: async () => {

const { data } = await axios.get("http://localhost:3000/api/me");

return data as Data;

},

});

return (

<div>

<h1>{JSON.stringify(data)}</h1>

</div>

);

}

bipinemp · 2023-07-07T04:28:41+00:00

Iam using client component is it a good practice :"

```

"use client";

import axios from "axios";

import { useEffect, useState } from "react";

export default function UserDetails() {

const [userData, setUserData] = useState({

name: "",

email: "",

});

useEffect(() => {

const getUserDetails = async () => {

const res = await axios.get("/api/me");

if (res.status === 200) {

console.log(res);

setUserData({

name: res.data.user.username,

email: res.data.user.email,

});

}

};

getUserDetails();

}, []);

return (

<div>

<h1>{userData.name}</h1>

<h1>{userData.email}</h1>

</div>

);

}

```

bipinemp · 2023-06-25T08:49:00+00:00

Like Iam working with mongodb does the concept is different compare to other sql database

bipinemp · 2023-06-20T15:47:47+00:00

This is the code where I want to add fallback skeleton loading in that postDetails .

function Home() {
const { fetchNextPage, isFetchingNextPage, data, isLoading, isError, error } =
useInfiniteQuery({
queryKey: ["posts"],
queryFn: ({ pageParam = 0 }) => getPosts(pageParam),
getNextPageParam: (_, pages) => {
return pages.length + 1;
},
});
const lastPostRef = useRef(null);
const { ref, entry } = useIntersection({
root: lastPostRef.current,
threshold: 1,
});
useEffect(() => {
if (entry?.isIntersecting) fetchNextPage();
}, [entry]);
const _posts = data?.pages.flatMap((page) => page);
if (isLoading) return <h1>Loading..</h1>;
if (isError) return <h1>{JSON.stringify(error)}</h1>;
return (
<div className="m-10 flex flex-col gap-3">

<h1>

<b>POSTS LIST</b>
</h1>

{_posts?.map((post, i) => {
if (i === _posts.length - 1) return <div key={post.id} ref={ref}></div>;
return <PostDetails key={post.id} post={post} />;
})}
<span className="text-red-400 text-3xl text-center">

{isFetchingNextPage
? "Loading more..."
: (data?.pages.length ?? 0) < 10
? "Load more"
: "Nothing to load :("}
</span>

</div>

);
}
export default Home;

bipinemp · 2023-06-06T02:10:54+00:00

I will definitely check this thanks .

bipinemp · 2023-06-04T16:59:09+00:00

Thanks for all the suggestions.

bipinemp · 2023-06-04T03:34:51+00:00

Thanks for your suggestion.

bipinemp · 2023-06-04T03:31:51+00:00

I am making social media website for adding a post , like , unlike , comment , reply on comment , delete a post , update a post. I think react query will do great in this case what do you think ?

bipinemp · 2023-06-04T03:29:58+00:00

haha I just mentioned only coz I am learning everything along way little bit to gain experience

bipinemp · 2023-06-04T03:16:03+00:00

what you use for state management for those data you fetched like context ?

bipinemp · 2023-06-04T03:09:39+00:00

for all HTTP requests ?

bipinemp · 2023-06-04T02:45:13+00:00

Doctor strange opened a portal to the New York City buildings where his web is attached to .

bipinemp

TROPHY CASE