NextJS get query outside component

Question

I have getServerSideProps function to get data from API:

export async function getServerSideProps() {
  const res = await fetch(
    `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${queryCocktailName}`
  )
  const data = await res.json()
  return {
    props: { data },
  }
}

I need to get query in this function, ( /search/queryCocktailName/ ) i tried const {query} = useRouter() but as NextJS say: Hooks can only be called inside of the body of a function component

This component location: search/[id].tsx

paolostyle · Accepted Answer · 2021-11-11T00:08:59.707

0

This should work:

import { GetServerSidePropsContext } from "next";

export async function getServerSideProps({
  params
}: GetServerSidePropsContext<{ id: string }>) {
  const res = await fetch(
    `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${params?.id}`
  );
  const data = await res.json();
  return {
    props: { data }
  };
}

See docs. getServerSideProps gets context object as a first parameter and it contains params field which should contain an id field, because your file is named [id].tsx.

Edit: changed to TypeScript version.

edited Nov 11 '21 at 00:08

answered Nov 10 '21 at 23:54

paolostyle

1,849
14
17

Yeah, thanks. But in typescript what type i should use? – Denis Nov 11 '21 at 00:00
Edited the answer. Didn't notice you use TypeScript. – paolostyle Nov 11 '21 at 00:09
If the code above works, please mark it as a solution. Thank you – paolostyle Nov 11 '21 at 15:22
It works, thank you. – Denis Nov 12 '21 at 23:46

score 0 · Answer 2 · answered Nov 11 '21 at 04:36

Every getServerSideProps have context, which comprises of req and res.

export async function getServerSideProps({req, res}) {
  const { url = "" } = req || {};
  //url will have the query of your route like :: url =  /search/queryCocktailName/

  const res = await fetch(
    `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${queryCocktailName}`
  )
  const data = await res.json()
  return {
    props: { data },
  }
}

Above code will work for your use-case

NextJS get query outside component

2 Answers2