A guide to securely retrieving data from the Hono API endpoint using type safety within a Next.js application

Currently, I am using Hono as my API endpoint with Bun. Now, I am working on a new app with Next.js and I want to ensure type safety when fetching data from my API. I believe I can accomplish this through RPC. However, I am unable to locate AppType mentioned in the documentation within my Next.js app. The setup includes two subdomains, api.example.com and portal.example.com. How can I effectively manage this situation and implement type-safe data fetching from my Hono API endpoint in my Next.js app? Any help or code examples would be appreciated.

Original Source:

javascripttypescriptnext.jshono

Answer №1

For my API endpoint, I'm currently using Hono along with Bun. Now, I'm in the process of developing a new app with Next.js, and my goal is to retrieve data from the API while ensuring type safety.

It's important to note that if you want to share types, you'll need a method to import them into your other app. This can be done by either publishing it as a package on platforms like NPM or Github Packages, or by setting up a monorepo where both app codes reside in the same repository (consider using NX and Turborepo).

Although I haven't personally used Hono, it seems similar to tRPC. Simply follow the documentation to set up the type and import it into your other app:

export type AppType = typeof route

Import:

import { AppType } from '.' // or wherever you're importing from, e.g. @myorg/types
import { hc } from 'hono/client'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding redundancy by establishing the loading state in a redux reducer

Let's dive into a concrete example to better illustrate my point. In the webapp I'm working on, users can apply for jobs using a job reducer that handles various actions such as creating_job, created_job, fetching_job, fetched_job, fecthing_jobs, ...

javascriptreactjsredux

Is there a way to select and handle multiple elements using async wdio with the same selector?

My test scenario involves using async wdio to test my React app, where I need to count elements with a specific selector and check their contents. The code snippet being tested is as follows: <div className='container'> <li className= ...

javascriptreactjswebdrivere2e-testingwebdriver-io

What advantages does subscribe() offer compared to map() in Angular?

I recently started exploring observables in angular2 and found myself puzzled over the decision to use map() instead of subscribe(). Let's say I am fetching data from a webApi, like so: this.http.get('http://172.17.40.41:8089/api/Master/GetAll ...

angulartypescriptrxjsobservableangular-observable

When the FileReader reads the file as readAsArrayBuffer, it ensures that the correct encoding is used

Currently, I am developing a script in JavaScript to read uploaded .csv/.xlsx files and convert the data into an array containing each row. Using FileReader along with SheetJs, I have successfully managed to achieve this by implementing the following code: ...

javascriptangularjscsvencodingsheetjs

What are the benefits of keeping synchronous state in the Redux store?

Is it necessary to store non-async state in the Redux store? For instance, when dealing with a modal that simply shows or hides, is it worth the extra work to toggle it within the store? Wouldn't it be simpler to just keep it as local state in the Rea ...

javascriptreactjsreduxsingle-page-applicationflux

JSReports encountered an unexpected token "<" in the JSON at position 0

Seeking assistance from those knowledgeable in JSReports, but open to suggestions from all... I've investigated the common issue of "unexpected token < in JSON at position 0", which typically arises when attempting to parse an HTML-formatted strin ...

javascriptnode.jsjsonjsonparserjsreport

"PHP, AJAX, and JavaScript work together to run a loop that processes only the final element

Hello everyone, I need assistance in saving data from a loop. Here is the code snippet that I am working with: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> ...

javascriptphpjqueryarraysajax

Transferring query parameters to a new page using the POST method in a Node JS and Express application

I'm experiencing an issue where I need to pass the same id through multiple consecutive web pages using query parameters. While transferring the param with GET routes works fine, I encounter a problem on the third page which has a short form and uses ...

javascriptnode.jsexpressweb-applications

Unexpected Error: The axiosCookieJarSupport function is throwing a TypeError, functioning properly in Node.JS but not in .vue pages. What could

Struggling with a function that authenticates on a website, it runs smoothly in a basic node.js script but fails when executed from a .vue page within the NuxtJS framework. The error message received when running in the .vue page is TypeError: axiosCookie ...

javascriptvue.jsaxiosnuxt.jssession-cookies

Requesting Axios.get for the value of years on end

I'm grappling with obtaining a JSON file from the server. The endpoint requires a year parameter, which needs to be set as the current year number as its value (e.g., ?year=2019). Furthermore, I need to fetch data for the previous and upcoming years a ...

javascriptarraysvue.jsgetaxios

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

javascriptcssreactjsmaterial-ui

Express 4 app.use not functioning properly

My backend setup is fairly straightforward with a few routes. I prefer to keep the route logic separate from the server.js file, but for some reason, when I make a POST request to the route, it returns a 404 error. In the server.js file: // Import necess ...

javascriptnode.jsexpressrouter

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

javascriptreactjstypescriptd3.js

Clear previously filtered items

I am currently working on implementing a search functionality using Javascript for my project, but I've hit a snag. After hiding certain items, I'm having trouble making them appear again. JSFiddle The code I have so far is as follows: $(' ...

javascriptjquery

How can I use JQuery to save values from a for loop?

After working on a grid, I encountered an issue where only the last value was being returned when trying to fetch all values into an object. Unfortunately, I am stuck and unsure of how to resolve this problem. function item_details(){ var gridDataAr ...

javascriptjquery

Utilizing useLocation for Defining Text Styles

I'm currently integrating TypeScript into my project, but I'm encountering an error related to 'useLocation' in my IDE. Any thoughts on what might be causing this issue? import React from "react"; import { useHistory, useLocat ...

reactjstypescriptreact-routerreact-router-dom

Retrieve data from a server in Next.js upon clicking a button

My server component retrieves data and passes it to child components using props. The problem is that when I refresh the page, the data doesn't update; it seems to be cached. This is why I would like to implement a button that allows me to manually f ...

next.jscachingfetchserver-side-rendering

Ways to determine the height of a row within a flexbox

Is it possible to obtain the height of each row within a flexbox container using JavaScript? For instance, if there are 3 rows in the container, can I retrieve the height of the second row specifically? ...

javascripthtmlcssflexboxrow

Angular 6 does not automatically include the X-XSRF-TOKEN header in its HTTP requests

Despite thoroughly reading the documentation and searching for answers on various platforms, I am still facing issues with Angular's XSRF mechanism. I cannot seem to get the X-XSRF-TOKEN header automatically appended when making a POST request. My si ...

angulartypescriptangular6csrfx-xsrf-token

Grouping results by month according to the datetime object in C#

I am working on an ASP.NET MVC application that includes a line chart displaying record counts and months on the X-axis and Y-axis respectively. To achieve this, I need to make an ajax call to the controller where the model holds information such as the r ...

javascriptc#ajaxasp.net-mvc