DEV Community: Anjan Talatam

React / Next JS error fix

Anjan Talatam — Tue, 14 Nov 2023 10:21:50 +0000

Error

'SomeComponent' cannot be used as a JSX component.
  Its type '(props: ISomeComponentProps) => JSX.Element' is not a valid JSX element type.
    Type '(props: ISomeComponentProps) => JSX.Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'Element' but 
          required in type 'ReactPortal'.ts(2786)

Fix:

Go to tsconfig.json
Add the following code under compiler options

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

Here is how compiler options should look like post-changes

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
  }
}

It is telling the typescript compiler that when it encounters a reference to the react module, it should look for the actual implementation in the ./node_modules/@types/react directory.

How to handle unmatched routes with serverless

Anjan Talatam — Sat, 21 Oct 2023 12:26:58 +0000

Context:

I mistakenly misspelled my login route as /dev/loginn instead of /dev/login on Postman, here is the response

{
    "currentRoute": "post - /dev/loginn",
    "error": "Serverless-offline: route not found.",
    "existingRoutes": [...],
    "statusCode": 404
}

Problem

The above response has 2 major issues

Existing routes are getting exposed which shouldn't be (ideally).
The response is too detailed. We need to keep it simple.

Fix

Add a new Lambda function to handle unmatched/ unconfigured Routes in serverless.yml

#serverless.yml

functions:
  unmatchedRoute:
    handler: handler.unmatchedRoute
    events:
      - http:
          path: /{proxy+}
          method: ANY

// handler.ts

import { Handler } from 'aws-lambda';

export const unmatchedRoute: Handler = async () => {
  return {
    statusCode: 404,
    body: '404 page not found',
  };
};

Thanks for reading! Drop a like if you found it helpful ❤️

Cheers! Anjan Talatam

Ignore from here

SEO

How to handle unconfigured routes with serverless
How to handle unmatched routes for AWS lambda functions
How to handle unconfigured routes for AWS lambda functions
How to handle unconfigured routes for AWS lambda functions with serverless

Can we use useQuery for POST request

Anjan Talatam — Mon, 18 Sep 2023 15:36:22 +0000

Yes

use useQuery() if you are fetching data from the server. ( irrespective of methods GET/ POST )

use useMutation() if you are modifying data on the server.

Back story 💭

I am under a misconception, that useQuery is only for GET requests and all other requests ( POST, PUT, DELETE ) are handled by useMutation.

// Detect dark theme var iframe = document.getElementById('tweet-1703786481230528777-341'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1703786481230528777&theme=dark" }

But as mentioned in the above tweet I got the below case.

Need to fetch data using a POST request.

Initially, I invoked useMutation on the mount with useEffect. ( To get the Data )

and never used thereafter in the code to mutate any data.

This looked like a useQuery material!

Upon searching Can we use useQuery for POST requests, I didn't find a direct blog/ article but on reading through the DOCS found that we can use useQuery for POST requests as well and got a much neater understanding on what useQuery and useMutation are meant for.

If you got a similar use case go ahead and use useQuery ✅

How to handle unregistered routes in Next JS API

Anjan Talatam — Fri, 25 Aug 2023 08:28:15 +0000

By default unregistered api routes fallback to below screen.

We can handle this by using Catch-all Segments in Next

In the /api folder create a file [...rest].tsx Give it a name of your choice. ( here rest refers to rest of the routes )

Now all unregistered routes can be handled in this file.

// [...rest].tsx

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(404).json({ message: "Route not found" });
}