Type-Safe Fetch with Next.js, Strapi, and OpenAPI

• qs

  2 8,335 7.6 JavaScript

  A querystring parser with nesting support

That would mean a bit of string concatenation. Luckily, Strapi suggest a library called qs to make this a bit more streamlined:

• TypeScript

  1,305 97,944 9.9 TypeScript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  

TypeScript helps you in many ways in the context of a JavaScript app. It makes it easier to consume interfaces of any type.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Strapi

  458 59,941 10.0 TypeScript

  🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.

  

const pages = await client.GET("/pages", { params: { query: { filters: { // @ts-ignore - openapi generated from strapi results in Record // https://github.com/strapi/strapi/issues/19644 path: { $eq: path, }, }, // @ts-ignore populate: { blocks: { populate: "*" }, }, }, }, });

• React

  1,694 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

What you have seen now works great especially when you are fetching data on the server, like in React Server Components using Next.js. But data fetching on the client side is often a bit more involved. At least what you want is for example some data loading indication and to know when the data is actually available in the client.

• strapi-next-rsc-openapi-fetch

  1 1 3.6 TypeScript

  YouTube, 20240301, using typed fetch with strapi and nextjs

The source code is available on GitHub.

• OpenAI-DotNet

  30 575 7.9 C#

  A Non-Official OpenAI RESTful API Client for DotNet

  

• Next.js

  2,044 120,572 10.0 JavaScript

  The React Framework

  

What you have seen now works great especially when you are fetching data on the server, like in React Server Components using Next.js. But data fetching on the client side is often a bit more involved. At least what you want is for example some data loading indication and to know when the data is actually available in the client.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• foundation

  210 86 0.0

  GraphQL Foundation Charter and Legal Documents (by graphql)

  

When you use technologies like GraphQL, it is trivial to derive TypeScript types. A GraphQL API is created by implementing a schema. Generating the TypeScript type definitions from this schema is simple, and you do not have to do any more work than just making the GraphQL API. This is one reason why I like GraphQL so much.

Suggest a related project