zhefciad Posts - Answer Overflow

zhefciad

•Created by zhefciad on 3/31/2024 in #💻┃support

Manually fetch user

nextjs sdk: Is it possible to fetch the user inside a function? Because on component mount, it's null. Then after some time, it loads. I want to track the progress with a loading state like the other fetches in fetchData. How do I do that? It's running the useEffect twice which messes up the loading state.

const ListingContent: React.FC<ListingCardModalProps> = ({ listing }) => {
  const [loading, setLoading] = useState(false);
  const { user } = useKindeBrowserClient();  //I want this to get fetched inside fetchData so that its progress gets tracked too. 
...
 useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      // get kinde user in database
      const kindeUserUrl = `${baseUrl}/api/kinde-users?filters[kindeID][$eq]=${user?.id}`;
      const [kindeUserResponse] = await Promise.all([fetch(kindeUserUrl)]);

      const kindeUserData = await kindeUserResponse.json();

      setKindeUser(kindeUserData.data[0]);

      const sellerUrl = `${baseUrl}/api/kinde-users?filters[kindeID][$eq]=${listing.attributes.createdby_kindeID}`;
      const sellerResponse = await fetch(sellerUrl);

      const sellerData = await sellerResponse.json();

      setSeller(sellerData.data[0].attributes);
      await setLoading(false);
    };

    fetchData();
  }, [user]);
...

const ListingContent: React.FC<ListingCardModalProps> = ({ listing }) => {
  const [loading, setLoading] = useState(false);
  const { user } = useKindeBrowserClient();  //I want this to get fetched inside fetchData so that its progress gets tracked too. 
...
 useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      // get kinde user in database
      const kindeUserUrl = `${baseUrl}/api/kinde-users?filters[kindeID][$eq]=${user?.id}`;
      const [kindeUserResponse] = await Promise.all([fetch(kindeUserUrl)]);

      const kindeUserData = await kindeUserResponse.json();

      setKindeUser(kindeUserData.data[0]);

      const sellerUrl = `${baseUrl}/api/kinde-users?filters[kindeID][$eq]=${listing.attributes.createdby_kindeID}`;
      const sellerResponse = await fetch(sellerUrl);

      const sellerData = await sellerResponse.json();

      setSeller(sellerData.data[0].attributes);
      await setLoading(false);
    };

    fetchData();
  }, [user]);
...

5 replies

KKinde

•Created by zhefciad on 3/14/2024 in #💻┃support

I'm getting a bunch of api/auth xhr requests, is this normal?

6 replies

KKinde

•Created by zhefciad on 3/14/2024 in #💻┃support

Add clickable button that redirects them back into the homepage when on authentication page

How do I make the logo clickable, and is it possible to add a button that says Go Back in the login/register page?

7 replies

KKinde

•Created by zhefciad on 2/24/2024 in #💻┃support

Custom Success route.ts failing in build process && not showing logs inside GET()

Refer to the code on the thread while reading this: goal: create copy of user in postgres db after successful signup (1st code below) on local dev, it's creating users successfully as I dont need to npm run build. But for production, I need to run npm run build. I'm using a VPS to deploy this NextJS app, and the error obviously happens because it's trying to get a user on success when it shouldnt since it's in a build. What I tried to do is skipping it with an env variable that if true, skips the user authentication (second code below). And I switch it to false before npm run start. I thought it's all good and done, but when I try to sign up a user, it is not getting created in my strapi database. And for some reason, the console logs anywhere inside the GET() is not showing in the console nor any errors. I know this because the logs are only TEST 1 TEST 2 which are the first two logs outside the GET() (2st code below) My guess is it's running because it's redirecting me to my baseFrontendUrl, and the console and error logs are just invisible. The code works locally, so I'm guessing the skipping stuff I did on npm run build is causing the issue. How do i debug this? How do I make the errors/logs show inside the GET()? Or is there another way of doing it?

8 replies

Gaming

Programming