0

My http axios api data fetch attempt inside the getServerSideProps function always returns error. I am succcessfully recovering token and userId from cockies, and trying to pass them as parameters to make server api call.

export const getServerSideProps: GetServerSideProps = async (ctx) => {

        try {
        const { userId, token } = ctx.req.cookies; 
        // console.log(userId)      
        // console.log(token)               
           
            const res = await api.get(`/users/show/${userId}`, {
              headers: { token },
         
            })
          console.log(res.data)
            const userData  = res.data;      

          if (!userData) {
            return {
              notFound: true,
            }
          }
          
            return {
              props: {  
                userData
         
              }
            }
          
        } catch (error) {
          return error
        }
          
          
      }

And keep getting same error:

  Server Error
Error: Additional keys were returned from `getServerSideProps`. Properties intended for your component must be nested under the `props` key, e.g.:

    return { props: { title: 'My Title', content: '...' } }

Keys that need to be moved: config, request, response, isAxiosError, toJSON.
Djony
  • 151
  • 1
  • 2
  • 14

1 Answers1

1

The returned object should always be on way

return { props: {//add your object here} }

export const getServerSideProps: GetServerSideProps = async (ctx) => {

        try {
        const { userId, token } = ctx.req.cookies; 
        // console.log(userId)      
        // console.log(token)               
           
            const res = await api.get(`/users/show/${userId}`, {
              headers: { token },
         
            })
          console.log(res.data)
            const userData  = res.data;      

          if (!userData) {
            return {
              return { props: { notFound: true } },
            }
          }
          
            return {
              props: {  
                userData
         
              }
            }
          
        } catch (error) {
          return { props: {} }
        }
          
          
      }
Chemi Adel
  • 1,964
  • 1
  • 10
  • 18
  • 1
    OMG!!!! You got it !!!! Thanks sooo much!! But now I got another prob, a typescript error related to id I am passing. I ll probably need to type tiken and id as string to pass them: TypeError: Cannot read properties of undefined (reading 'id') – Djony Oct 22 '21 at 01:51
  • @Djony Accepting the answer can helpful – Chemi Adel Oct 22 '21 at 03:25
  • I am still stuck, with original problem, not sure if I am making api data fetching correctly, can t finding examples of axios api calls inside getServerSideProps. I am getting token and user id fromcockies and trying to pass as params, not working: const res = await api.get(`/users/show/${userId}`, { params: { token }, // or params:{ // userId // } }) – Djony Oct 22 '21 at 19:21
  • I fixed it, it s fetching data, I just added some header basic configuration: const res = await api.get(`/users/show/${userId}`, { headers: { Authorization: `Bearer ${token}`, }, } ) – Djony Oct 22 '21 at 20:55