Passing query params or body with NextJS + Auth0?

Question

So, my knowledge of next and JS in general is extremely minimal as is my Auth0 knowledge. I was wondering if anyone could suggest how to pass query parameters or a request body to the first block of code below?

I know I can add a body to the fetch function, but when I try to do that in the /pages/profile block below, it seems to break the request.

Even better would be to make this some kind of generic function, where I can pass in a the route, method, and body since all of the routes will be protected anyway.

Any help would be greatly appreciated.

/pages/api/my/user

import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function shows(req, res) {
  try {
    const { accessToken } = await getAccessToken(req, res, {
      scopes: ['profile']
    });
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/my/user`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
    });

    const shows = await response.json();

    res.status(200).json(shows);
  } catch (error) {
    res.status(error.status || 500).json({ error: error.message });
  }
});

And here's the snippet that fetches the above: /pages/profile

  const [state, setState] = useState({ isLoading: false, response: undefined, error: undefined });

  useEffect(() => {
    callApi();

  }, []);

  const callApi = async () => {
    setState(previous => ({ ...previous, isLoading: true }))

    try {
      const response = await fetch(`/api/my/user`);
      const data = await response.json();
      
      setState(previous => ({ ...previous, response: data, error: undefined }))
    } catch (error) {
      setState(previous => ({ ...previous, response: undefined, error }))
    } finally {
      setState(previous => ({ ...previous, isLoading: false }))
    }
  };

  const { isLoading, response, error } = state;

Answer 1

Cannot see where your actual problem is - here's a snippet that usually works for me with fetch: provide headers and body as parameters of an options variable, add the url and you are good to go. const res = await fetch(url, options)

const protocol = 'https'
const hostname = 'YOURHOSTNAME'
const queryParams = `foo=bar`
const body = []
const url = `${protocol}://${hostname}/api/${endpoint}?${queryParams}`;
    const options = {
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': `${hostname}`, // set as needed
        },
        body: body,
        method: 'POST', 
    };
const res = fetch(url, options);

Hope this helps