How would I get the name of a user in my headers?

Answered

Southeastern blueberry bee posted this in #help-forum

Southeastern blueberry beeOP

2023-12-10T16:59:40.000Z

Right now my /api/user script is

export async function GET() {

    const response = await fetch("https://customprofiles.xyz/api/v1/user", {
        method: 'GET',
        headers: {
            'token': '...',
            'name': 'the name of the person'
        }
    });
    const data = await response.json();

    return Response.json({ data });

}

/[name]/page.tsx

const response = await fetch('https://customprofiles.xyz/api/user', {
    headers: {
      'name': params.name,
    },
  });
  const res = await response.json()

How would i get the params name in the /api/user script?

Answered by Ray

import {NextRequest} from 'next/server'

export async function GET(req: NextRequest) {
    const name = req.headers.get("name")
    const response = await fetch("https://customprofiles.xyz/api/v1/user", {
        method: 'GET',
        headers: {
            'token': 'token',
            'name': name
        }
    });
    const data = await response.json();

    return Response.json({ data });

}

View full answer

154 Replies

@Southeastern blueberry bee Right now my `/api/user` script is js export async function GET() { const response = await fetch("https://customprofiles.xyz/api/v1/user", { method: 'GET', headers: { 'token': '...', 'name': 'the name of the person' } }); const data = await response.json(); return Response.json({ data }); } `/[name]/page.tsx` js const response = await fetch('https://customprofiles.xyz/api/user', { headers: { 'name': params.name, }, }); const res = await response.json() How would i get the params name in the `/api/user` script?

Ray

2023-12-10T17:01:20.000Z

import {NextRequest} from 'next/server'

export async function GET(req: NextRequest) {
    const name = req.headers.get("name")
    const response = await fetch("https://customprofiles.xyz/api/v1/user", {
        method: 'GET',
        headers: {
            'token': 'token',
            'name': name
        }
    });
    const data = await response.json();

    return Response.json({ data });

}

Answer

Southeastern blueberry beeOP

2023-12-10T17:01:50.000Z

oop

i exposed my toke

gotta change it now

ðŸ’€

Ray

2023-12-10T17:02:02.000Z

lol

i changed my reply

Southeastern blueberry beeOP

2023-12-10T17:02:24.000Z

same

let me test ur thing

and if it works i will thank you

again

omg

@Ray

you are insanly smart

thank you so much ray

Ray

2023-12-10T17:04:29.000Z

btw, why don't you just fetch the /api/v1 in the page component directly?

Southeastern blueberry beeOP

2023-12-10T17:05:24.000Z

wait @Ray

when

i do

so when i go on the page.tsx

  console.log(res)

this prints

{ data: { profile: 'No profile found.' } }

when it should be printing all the info

the name of the profile is valid

see

@Ray any idea?

@Ray btw, why don't you just fetch the /api/v1 in the page component directly?

Southeastern blueberry beeOP

2023-12-10T17:08:13.000Z

so they dont see token

@Southeastern blueberry bee so they dont see token

Ray

2023-12-10T17:08:38.000Z

they won't see it if its a server component

Southeastern blueberry beeOP

2023-12-10T17:08:47.000Z

yh but page.tsx is client

and the url endpoint

@Southeastern blueberry bee Click to see attachment

Ray

2023-12-10T17:09:27.000Z

that's why the res is { data: { profile: 'No profile found.' }

if it's client component, you should do the fetching inside a useEffect

Southeastern blueberry beeOP

2023-12-10T17:09:46.000Z

why

Ray

2023-12-10T17:09:47.000Z

or react-query

Southeastern blueberry beeOP

2023-12-10T17:09:51.000Z

how do i do that

like this

useEffect(() => {

    const f = async () => {
      try {
        const response = await fetch('https://customprofiles.xyz/api/user', {
          headers: {
            'name': params.name,
          },
        });
        const res = await response.json()
        setData(res)
      } catch(e) {
        setData('Error')
      }
    }
  }, [])

  console.log(res)

Ray

2023-12-10T17:13:49.000Z

"use client";

import { useEffect } from "react";

export default function Page({ params }: { params: { name: string } }) {
  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      console.log(res);
    }

    fetchData();
  }, [params.name]);

  return <div>1</div>;
}

Southeastern blueberry beeOP

2023-12-10T17:14:24.000Z

data is null

i dont see the

console.log(res);

Ray

2023-12-10T17:16:03.000Z

i got the result

Southeastern blueberry beeOP

2023-12-10T17:16:20.000Z

@Ray i got the result

Southeastern blueberry beeOP

2023-12-10T17:16:38.000Z

what page isthat?

https://customprofiles.xyz/g?

whaats ur console on that page

Ray

2023-12-10T17:17:01.000Z

i see the result here too

Southeastern blueberry beeOP

2023-12-10T17:17:27.000Z

what

Ray

2023-12-10T17:17:33.000Z

lol

Southeastern blueberry beeOP

2023-12-10T17:17:38.000Z

i dont see that

Ray

2023-12-10T17:18:09.000Z

not sure what happen on your side

try to remove async

Southeastern blueberry beeOP

2023-12-10T17:19:07.000Z

now?

'use client'
import { useEffect, useState } from 'react'
import styles from '../components/custom.module.css'

export default function Page({ params }: { params: { name: string }}) {

  const [ data, setData ] = useState(null)

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      console.log(res);
      setData(res)
    }

    fetchData();
  }, [params.name]);

  return <div className={styles.container}>
    <div className={styles.logo}>
      <img src="https://cdn.discordapp.com/attachments/1178132493690474559/1180203036132528258/image.png?ex=6585cb3a&is=6573563a&hm=b6d399c87c67f14b3eca97adbd4566b634e8876529347c418931f9f1c63bc251&" width="70px" height="70px"></img>
      <p>Custom Profiles</p>
    </div>
  </div>
}

Ray

2023-12-10T17:19:37.000Z

Southeastern blueberry beeOP

2023-12-10T17:19:44.000Z

what

am i doing anything wrong on my console?

Ray

2023-12-10T17:20:14.000Z

there is something wrong with the page loading the js on your side

I don't get those error

Southeastern blueberry beeOP

2023-12-10T17:20:33.000Z

ill try on different browser

it works on a different browser

Ray

2023-12-10T17:21:15.000Z

cool

what broswer were you using

Southeastern blueberry beeOP

2023-12-10T17:21:22.000Z

google

Ray

2023-12-10T17:21:25.000Z

Southeastern blueberry beeOP

2023-12-10T17:21:25.000Z

now firefox

how do i access the data in here

Ray

2023-12-10T17:21:57.000Z

store it in state

Southeastern blueberry beeOP

2023-12-10T17:22:10.000Z

const [ data, setData ] = useState(null)

thats this

yea?

Ray

2023-12-10T17:22:43.000Z

"use client";

import { useEffect, useState } from "react";

export default function Page({ params }: { params: { name: string } }) {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res);
    }

    fetchData();
  }, [params.name]);

  return <div>{JSON.stringify(user, null, 2)}</div>;
}

yea

@Ray ts "use client"; import { useEffect, useState } from "react"; export default function Page({ params }: { params: { name: string } }) { const [user, setUser] = useState([]); useEffect(() => { async function fetchData() { const response = await fetch("https://customprofiles.xyz/api/user", { headers: { name: params.name, }, }); const res = await response.json(); setUser(res); } fetchData(); }, [params.name]); return <div>{JSON.stringify(user, null, 2)}</div>; }

Southeastern blueberry beeOP

2023-12-10T17:24:15.000Z

bro

your incredible

but

Southeastern blueberry beeOP

2023-12-10T17:24:41.000Z

how would i get

lets say

the bio

Ray

2023-12-10T17:25:00.000Z

which one is bio

Southeastern blueberry beeOP

2023-12-10T17:25:00.000Z

only bio

Ray

2023-12-10T17:25:42.000Z

"use client";

import { useEffect, useState } from "react";

export default function Page({ params }: { params: { name: string } }) {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res);
    }

    fetchData();
  }, [params.name]);

  if (!user) return <div>loading...</div>

  const [bioObj] = user

  return <div>{JSON.stringify(bioObj.bio, null, 2)}</div>;
}

Southeastern blueberry beeOP

2023-12-10T17:26:26.000Z

im confused from that

Ray

2023-12-10T17:27:59.000Z

confuse on which part

Southeastern blueberry beeOP

2023-12-10T17:28:05.000Z

const [bioObj] = user

return <div>{JSON.stringify(bioObj.bio, null, 2)}</div>;

Ray

2023-12-10T17:28:23.000Z

because user is an array of 3 object

we destruct the first object

Southeastern blueberry beeOP

2023-12-10T17:28:34.000Z

oh yh

but

why bioObj?

Ray

2023-12-10T17:29:25.000Z

can be anyname lol

Southeastern blueberry beeOP

2023-12-10T17:30:00.000Z

why does this not work

const [bioObj] = user

return <div>{JSON.stringify(bioObj, null, 2)}</div>;

what

@Southeastern blueberry bee const [bioObj] = user return <div>{JSON.stringify(bioObj.bio, null, 2)}</div>;

Southeastern blueberry beeOP

2023-12-10T17:30:35.000Z

not even this works

does it work for you?

Ray

2023-12-10T17:30:47.000Z

const [bioObj] = user.data

Southeastern blueberry beeOP

2023-12-10T17:30:55.000Z

still deosnt work

Ray

2023-12-10T17:31:26.000Z

show the code

Southeastern blueberry beeOP

2023-12-10T17:31:32.000Z

"use client";
import styles from '../components/custom.module.css'
import { useEffect, useState } from "react";

export default function Page({ params }: { params: { name: string } }) {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res);
    }

    fetchData();
  }, [params.name]);

  const [test] = user.data

  return <div className={styles.container}>
    <div className={styles.logo}>
      <img src="https://cdn.discordapp.com/attachments/1178132493690474559/1180203036132528258/image.png?ex=6585cb3a&is=6573563a&hm=b6d399c87c67f14b3eca97adbd4566b634e8876529347c418931f9f1c63bc251&" width="70px" height="70px"></img>
      <p>Custom Profiles</p>
    </div>
    <p>{JSON.stringify(test.bio, null, 2)}</p>
  </div>
}

Ray

2023-12-10T17:33:07.000Z

oh wait

"use client";
import styles from '../components/custom.module.css'
import { useEffect, useState } from "react";

export default function Page({ params }: { params: { name: string } }) {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res.data);
    }

    fetchData();
  }, [params.name]);

  if (!user) return <div>loading....</div>

  const [test] = user

  return <div className={styles.container}>
    <div className={styles.logo}>
      <img src="https://cdn.discordapp.com/attachments/1178132493690474559/1180203036132528258/image.png?ex=6585cb3a&is=6573563a&hm=b6d399c87c67f14b3eca97adbd4566b634e8876529347c418931f9f1c63bc251&" width="70px" height="70px"></img>
      <p>Custom Profiles</p>
    </div>
    <p>{JSON.stringify(test.bio, null, 2)}</p>
  </div>
}

you missed the loading part

Southeastern blueberry beeOP

2023-12-10T17:34:39.000Z

but if the data hasent loaded itll say loading for forever

Ray

2023-12-10T17:34:58.000Z

"use client";
import styles from "../components/custom.module.css";
import { useEffect, useState } from "react";

export default function Page({ params }: { params: { name: string } }) {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res.data);
    }

    fetchData();
  }, [params.name]);

  const [test] = user;

  return (
    <div className={styles.container}>
      <div className={styles.logo}>
        <img
          src="https://cdn.discordapp.com/attachments/1178132493690474559/1180203036132528258/image.png?ex=6585cb3a&is=6573563a&hm=b6d399c87c67f14b3eca97adbd4566b634e8876529347c418931f9f1c63bc251&"
          width="70px"
          height="70px"
        ></img>
        <p>Custom Profiles</p>
      </div>
      <p>{JSON.stringify(test?.bio, null, 2)}</p>
    </div>
  );
}

this

Southeastern blueberry beeOP

2023-12-10T17:35:37.000Z

omg

if i want the userid

i do

Ray

2023-12-10T17:36:09.000Z

test?.userid

Southeastern blueberry beeOP

2023-12-10T17:36:12.000Z

so what if i want data from a different array

in the data

Ray

2023-12-10T17:36:36.000Z

const [test,test2,test3] = user;

Southeastern blueberry beeOP

2023-12-10T17:36:42.000Z

right

so it would be better to do

const [ info, status, user ]

cause they match the coresponding tables

Ray

2023-12-10T17:37:20.000Z

yea its up to you

Southeastern blueberry beeOP

2023-12-10T19:57:45.000Z

const [user, setUser] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://customprofiles.xyz/api/user", {
        headers: {
          name: params.name,
        },
      });
      const res = await response.json();
      setUser(res.data);
    }

    fetchData();
  }, [params.name]);

  const [ info, status, discorduser ] = user;

  console.log(info)

nv,m

nvm again

what

it keep prints undefined then the array

@Ray

const [ info, status, discorduser ] = user;

console.log(discorduser.displayAvatarURL)

Southeastern blueberry beeOP

2023-12-10T22:49:05.000Z

fixed