Theo's Typesafe Cult•2y ago

Type of return from await

getting a TS error stating "34:9 Error: Unsafe assignment of an any value." on my await in getServerSideProps. Tried to scour the docs for a solution but can't find anywhere where someone sets a type that works for me await. getAudit is a JS function, not TS (yet). Any ideas on how I should best solve this?

export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit= await getAudit(`/granskninger/${params.query.slug}`); //  34:9  Error: Unsafe assignment of an `any` value. + 34:48  Error: Invalid type "string | string[] | undefined" of template literal expression. 
  return {
    props: { audit }
  };
};

export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit= await getAudit(`/granskninger/${params.query.slug}`); //  34:9  Error: Unsafe assignment of an `any` value. + 34:48  Error: Invalid type "string | string[] | undefined" of template literal expression. 
  return {
    props: { audit }
  };
};

I have the "correct" props for my render function in the page

type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};

type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};

16 Replies

Unknown User•2y ago

Message Not Public

VimesOP•2y ago

Tried to do " const audit= await getAudit(/granskninger/${params.query.slug}) as Props;"but got the same error, also tried const audit: Props = await getAudit(/granskninger/${params.query.slug}); What I find so weird is that the nextjs docs don't set any types on the await in their examples

Brendonovich•2y ago

Are you sure that the return type of getAudit is correct? oh wait it's a JS function nvm

VimesOP•2y ago

it is the data I'm using, but I am also very stupid so I may be wrong. Full file:

import { NextPage, GetServerSideProps } from "next";
import { ContentProps } from "../../../ts/auditTypes";
import Layout from "../../../components/Layout";
import { getAudit } from "../../api/auth/fetchData";
import AuditRenderer from "../../../audit/auditRenderer";
type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};



const Kundeportal: NextPage<Props> = ({ audit }) => {
  const { name } = audit.content;
  console.log("Audit er", audit);
  return (
    <Layout>
      <div className="container mx-auto px-4">
        <h1>{name}</h1>
        <AuditRenderer content={audit.content.descendants} />
      </div>
    </Layout>
  );
};

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


  const audit: Props = await getAudit(`/granskninger/${params.query.slug}`);
  return {
    props: { audit }
  };
};

export default Kundeportal;

import { NextPage, GetServerSideProps } from "next";
import { ContentProps } from "../../../ts/auditTypes";
import Layout from "../../../components/Layout";
import { getAudit } from "../../api/auth/fetchData";
import AuditRenderer from "../../../audit/auditRenderer";
type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};



const Kundeportal: NextPage<Props> = ({ audit }) => {
  const { name } = audit.content;
  console.log("Audit er", audit);
  return (
    <Layout>
      <div className="container mx-auto px-4">
        <h1>{name}</h1>
        <AuditRenderer content={audit.content.descendants} />
      </div>
    </Layout>
  );
};

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


  const audit: Props = await getAudit(`/granskninger/${params.query.slug}`);
  return {
    props: { audit }
  };
};

export default Kundeportal;

it will be a TS function once I become better at this TS thing

Unknown User•2y ago

Message Not Public

Brendonovich•2y ago

const audit: Audit = await ... might work too?

VimesOP•2y ago

how would audit: Audit work? Should I copy the props type to a different Audit type? @Geezer Give a few seconds/minutes to understand your code 🙂

Brendonovich•2y ago

yeah take the audit part and put it in a separate type

Unknown User•2y ago

Message Not Public

Brendonovich•2y ago

Idk if TS will be happy with that since it's still an assignment of any but it might work If that doesn't work then Geezer's solution of as Audit would be necessary

VimesOP•2y ago

TS not happy with audit as it's own thing. Currently chewing through geezers suggestion, allot to take inn

Unknown User•2y ago

Message Not Public

VimesOP•2y ago

fire alarm going, be back in not too long

Unknown User•2y ago

Message Not Public

VimesOP•2y ago

Was just a carpenter having a smoke 🙃 Your solution worked @Geezer, thanks!

type Props = {
  audit: Audit;
};

type Audit = {
  content: {
    descendants: { items: ContentProps[] };
    id: string;
    level: number;
    name: string;
  };
};
export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit = (await getAudit(
    `/granskninger/${params.query.slug as string}`
  )) as Audit;
  return {
    props: { audit },
  };
};

type Props = {
  audit: Audit;
};

type Audit = {
  content: {
    descendants: { items: ContentProps[] };
    id: string;
    level: number;
    name: string;
  };
};
export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit = (await getAudit(
    `/granskninger/${params.query.slug as string}`
  )) as Audit;
  return {
    props: { audit },
  };
};

So I say audit = waiting for something sent as string -> this await returns the data that fits Audit props. still weird how I couldn't use just Props directly, but it probably makes sense somehow

Unknown User•2y ago

Message Not Public

Gaming

Programming

Type of return from await