Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript example not working

See original GitHub issue

I modified the TypeScript example a little bit like this:

import { withOGImage, NextApiOgImageConfig } from 'next-api-og-image'

interface IHTML {
	heading: NextApiOgImageConfig<'heading'>
}

const html = async ({ heading }: IHTML) => {
	return `
		<html>
			<head>
				<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
			</head>
			<body>
				<h1>${heading}</h1>
			</body>
		</html>
	`
}

const nextApiOgImageConfig = {
	// 'Content-Type' HTTP header
	contentType: 'image/png',
	// 'Cache-Control' HTTP header
	cacheControl: 'max-age 3600, must-revalidate',
	// NOTE: Options within 'dev' object works only when process.env.NODE_ENV === 'development'
	dev: {
		// Whether to replace binary data (image/screenshot) with HTML
		// that can be debugged in Developer Tools
		inspectHtml: true,
	},
	html,
}

export default withOGImage<'heading'>(nextApiOgImageConfig)

And it’s not working. I get an error on the last line on nextApiOgImageConfig saying:

Argument of type '{ contentType: string; cacheControl: string; dev: { inspectHtml: boolean; }; html: ({ heading }: IHTML) => Promise<string>; }' is not assignable to parameter of type 'NextApiOgImageConfig<"heading">'.
  Types of property 'html' are incompatible.
    Type '({ heading }: IHTML) => Promise<string>' is not assignable to type '(...queryParams: Record<"heading", string | string[]>[]) => string | Promise<string>'.
      Types of parameters '__0' and 'queryParams' are incompatible.
        Type 'Record<"heading", string | string[]>' is not assignable to type 'IHTML'.
          Types of property 'heading' are incompatible.
            Type 'string | string[]' is not assignable to type 'NextApiOgImageConfig<"heading">'.
              Type 'string' is not assignable to type 'NextApiOgImageConfig<"heading">'.ts(2345)

How do I fix that?

Issue Analytics

State:
Created 2 years ago
Comments:14 (5 by maintainers)

Top GitHub Comments

1reaction

neg4ncommented, Oct 7, 2021

Hey @deadcoder0904, Please see https://github.com/neg4n/next-api-og-image#splitting-files for example usage of query params helper type 😄 I’m closing the issue - I think everything has been said. If I’m mistaken, feel free to reopen it! 🤗 Cheers

1reaction

deadcoder0904commented, Oct 6, 2021

Simplified it a bit:

import { withOGImage } from 'next-api-og-image'

type Params = 'heading' | 'description'

const html = async ({
	heading,
	description,
}: Record<Params, string | string[]>): Promise<string> => {
	return `
		<html>
			<head>
				<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
			</head>
			<body>
				<h1>${heading}</h1>
				<p>${description}</p>
			</body>
		</html>
	`
}

const nextApiOgImageConfig = {
	// 'Content-Type' HTTP header
	contentType: 'image/png',
	// 'Cache-Control' HTTP header
	cacheControl: 'max-age 3600, must-revalidate',
	// NOTE: Options within 'dev' object works only when process.env.NODE_ENV === 'development'
	dev: {
		// Whether to replace binary data (image/screenshot) with HTML
		// that can be debugged in Developer Tools
		inspectHtml: true,
	},
	html,
}

export default withOGImage<Params>(nextApiOgImageConfig)