NextJS Typescript Documentation, Request and <StructuredText>

🆘 Support
,
1

Hey everyone! I’m trying to work with DatoCMS and NextJS with Typescript for the first time, and the documentation is not so good unfortunately.

My query returns a Typescript error:

export const getStaticProps: GetStaticProps = async () => {
  const data = await request({
    query: `query Projects {
 allProjects(orderBy: _firstPublishedAt_DESC) {
   _firstPublishedAt
   id
   category
   discipline {
     name
   }
   title
   headerImagesPortrait {
     id
     responsiveImage {
       height
       width
       src
       base64
     }
   }
 }
    }
    `,
  });

  return {
    props: {
      data,
    },
  };
};

which returns: Argument of type "{ query: string; }' is not assignable to parameter of type "{ query: any; variables: any; includeDrafts: any; excludelnvalid: any; }'. Type "{ query: string; y' is missing the following properties from type "{ query: any; variables: any; includeDrafts: any; excludelnvalid: any; }': variables, includeDrafts, excludelnvalid

Furthermore, I have a type definition file for this query:

export interface Project {
  allProjects: [
    {
      _firstPublishedAt: string;
      id: string;
      category: string;
      discipline: Array<{
        name: string;
      }>;
      title: string;
      headerImagesPortrait: Array<{
        id: string;
        responsiveImage: Array<{
          height: number;
          width: number;
          src: string;
          base64: string;
        }>;
      }>;
    }
  ];
}

which I have in my index file:

interface Props {
  data: [Project];
}

and also returns an error: Property 'allProjects' does not exist on type '[Project]'.

I have a datocms.ts file according to the JS NextJS DatoCMS tutorial which also results in a bunch of errors. Also, the type of <StructuredText> is unclear to me. I have previously worked with NextJS and Sanity which was working pretty great and I have been using Dato with Gatsby in JS as well. Upgrading to TS however, has been quite difficult for me with Dato.

Thanks for any help!

2

Hello @max.inzn

I’m not sure i’m familiar with the “request” function on Node, are you using this package https://www.npmjs.com/package/request or have you defined it as a helper function yourself? If so, could you send me the function defenition?

Using Nodes native “fetch” function to do the request would have the body equal to the stringified version of the {query: allProjects …} object as a body, and as headers the following:

fetch(
  'https://graphql.datocms.com/',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({
      query: '{ allPosts { title } }'
    }),
  }
)
3

I got this same error. The problem is that you are probably using the JS request code from the Datocms docs. The problem is that it is written in JS, and when using TS it will require you to send in all 4 arguments from the JS file, or you will get an error. So either change the request code to TS and make those arguments optional, other than query, or just send in all 4 arguments. I opted to just send in all 4 arguments, as I don’t have the patience to fix the JS to TS in the request code. Once I sent in all 4 arguments to the request, the error disappeared.