Enabling PNPM in AWS Amplify Gen 2

 Hi,

Having trouble enabling PNPM in your AWS Amplify Gen 2 project?

Not a problem here is the YAML configuration

Happy coding!

 .NET Web API / MVC Request Body

A shortie but a goodie

Ever want to look at the request body, the request headers and so on in .NET Web API ?

https://learn.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

Well, that doesn't exactly tell you how to do it. In fact, nothing does. Microsoft wants you to work at a higher level of abstraction than looking at the request. But we all know that isn't always a good idea or possible. Time to quit back to NodeJS?

If you look at Stack Overflow you will see many answers like this

string result = await Request.Content.ReadAsStringAsync();

One problem. It doesn't actually work.

* It might return an empty string

* It might hang the application

* It can deadlock

* Evil happens

So don't do it

What do you do instead?

Well, not to worry there is actually a very simple answer that's so simple it should be in the Microsoft examples (but it isn't). Hundreds or thousands of hours of experience and debugging contributed to finding this answer (or one lucky StackOverflow post you choose what to believe). You could look for this answer for ten sprints and not find it.

You will now receive this answer.

public HttpResponseMessage Get(HttpRequestMessage message) { // Access the message body here!

var content = message.Content.ReadAsStringAsync();

Task.WaitAll(content);

var body = content.Result; }

With great power comes great responsibility -- take a deep dive into Tasks (and Microsoft in general) in this man's blog here https://blog.stephencleary.com/2014/04/a-tour-of-task-part-0-overview.html but for those who just need to access the request body (which in NodeJS takes two seconds) the above should work

Of course ask yourself the question if you really want to use the Request Body. If you really need it.

Happy Coding!

Advanced React Hacks 5/10 - "Old School" Events

Another "advanced" tip coming!

Consider the following situation

• You're required to communicate between components in different locations at the component hierarchy. Perhaps they aren't even in a parent child relationship
• Some functions are involved, maybe some loops. This code is already done, and already works.
• Perhaps, some refs or other outside-of-React escape hatches are involved. This code is already done, and already works
• And of course the usual restriction of a "professional" software developer -- don't change too much, and anything you change must be regression tested and so on and so on!

You consider several solutions

• Since functions and loops are involved, you can't use hooks (at least not inside the functions or loops)
• The code is already done; you don't want to refactor everything and besides you're not sure that refactoring everything will lead to a better solution anyway because it's a one-off
• Ideally all the information should have been stored in a central location and flow down to all the required components, but that bus is gone
• Besides, the days of storing a property, modifying it with two-way data binding and binding to that property are long since over (this isn't Knockout or Backbone!)
• Besides, even if you did it, you would have to modify enormous amounts of already completed code, possibly create regressions, and pass down props many levels!
• Seems like a perfect situation to use Redux (Redux Toolkit) or some other state management but besides the fact you can't use hooks, you don't want to mess with the global store and it seems wrong to use it for the one-off
• You look at some solutions like HTML5 local storage, but that's already outside of React and you would somehow have to subscribe to local storage anyway
• Besides, the usehook-ts package doesn't properly install
• Besides, after copying the usehooks-ts package, it's a hook, so you can't use it in the functions anyway!

What do you do now? Is React so obtuse that you really can't deal with this situation in any way?

Are you doomed to a sprint carryover and total humiliation, just because React sucks monkey balls?

There is an answer

Forget React

Forget Hooks

Forget Frameworks

Forget react.dev documentation (except for this )

JAVASCRIPT

// inside a custom hook if you want to reuse this...

// put custom hook inside component you want to rerender...

// or just put this inside the component...

useEffect(() => {

  const func = {

    // code to subscribe to...

  }

  window.addEventListener('cool-event-name-make-it-constant', func);

  return () => window.removeEventListener('cool-event-name-make-it-constant', func);

});

...

// inside the function you want to trigger an event from

// Normal JavaScript!

// setTimeout is the secret sauce when dealing with refs! (may not be required)

setTimeout(() => {

  window.dispatchEvent(new Event("cool-event-name-make-it-constant"));

}, 10);

So remember the basics, and when React fails you, just use ordinary JavaScript

The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

Calling dispatchEvent() is the last step to firing an event. The event should have already been created and initialized using an Event() constructor.

The best documentation

Sometimes the old ways are the best ways

Hope this helps someone!

Advanced React Hacks 4/10 - Prevent Rerenders

Very obvious when you see the answer (and actually documented on react.dev, link later) but still worth mentioning for posterity.

You don't want to render too much, because one point of React is that it minimises the amount of rerenders on a screen (or is supposed to)

How do most working React developers see this? With the "highlight updates" tool of course

But, it is worth mentioning (in case it happens again, and for a lesson) that in 2019 with React Developer Tools v4, this killer feature was removed

To the React Team's credit, they restored "Highlight Updates" quickly

Anyway how do you prevent re-rendering? It's actually easy

Once the component has been initially rendered, you can trigger further renders by updating its state with the set function. Updating your component’s state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.) React.Dev "Managing State"

If you see too much of your screen rendering making it slow when taking actions (like clicking) break it down

Make more components... obvious, but worth mentioning the obvious

Until next time...

Advanced React Hacks 3/10 - Dynamic GraphQL

Eventually you will reach a point in your career where you need or want to make dynamic GraphQL queries

At first it will seem "advanced" especially when looking at Google or Stack Overflow answers

You probably are used to static queries strongly typed from a schema.graphql with autocomplete in VSCode

How the hell can that change or be data driven?

Well the answer is in the specification

Typically validation is performed in the context of a request immediately before execution, however a GraphQL service may execute a request without immediately validating it if that exact same request is known to have been validated before. A GraphQL service should only execute requests which at some point were known to be free of any validation errors, and have since not changed.

For example: the request may be validated during development, provided it does not later change, or a service may validate a request once and memoize the result to avoid validating the same request again in the future.

Request may be validated during development => request may be validated during runtime => request may change!

For example with graphql-tag

GraphQL strings are the right way to write queries in your code, because they can be statically analyzed using tools like eslint-plugin-graphql. However, strings are inconvenient to manipulate, if you are trying to do things like add extra fields, merge multiple queries together, or other interesting stuff.

That's where this package comes in - it lets you write your queries with ES2015 template literals and compile them into an AST with the gql tag.

With string interpolation, "dynamic GraphQL" is actually trivial! Just build the string! (And this is JavaScript not Java so you don't need a StringBuilder!)

So,

a) RTFM (in this case the specification!)

b) Never trust the "right way"

c) Look for an existing solution

d) Probably more things I haven't thought of...

Back to basics!

Hope this helps someone!

 Advanced React Hacks 2/10 - Dynamic JSX

What if you want a data driven application that renders JSON (not HTML obviously, always BBCode!) as JSX?

One way is React.Children

Instead do this,

export const Component = ({ children }: { children: ReactNode }) => {

  const isArray = Array.isArray(children);

  return (

    <>

      {!isArray && children}

      {isArray &&

        children.map((child, index) => {

          return <div key={index}>{child}</div>; // do stuff to the child here

        })}

    </>

  );

};

Now you can use it

import { Component } from "./Component";

export default function App() {

  return (

    <div>

      <Component>test</Component>

      <Component>

        <div>test2</div>

        <div>test3</div>

      </Component>

      <Component>

        <div>test4</div>

        <div>test5</div>

      </Component>

    </div>

  );

}

(Wow pasting from CodeSandbox worked!)

https://codesandbox.io/p/sandbox/cranky-haslett-749y8y

Hope this helps someone!

Advanced React Hacks 1/10 - Conditional Hooks

 According to react.dev "Rules of Hooks" you cannot call hooks inside a condition

https://react.dev/warnings/invalid-hook-call-warning#breaking-rules-of-hooks

But what if you want it?

Use components!

export const ParentComponent = ({ component }: ParentComponentProps) => {

  /* derive condition here */

  // const condition = false;

  const condition = true;

  /* derive property here */

  // cont property = 0;

  // ...

  return (<>

    {

      condition && <HookComponent hookProperty={property} />

    }

  </>);

}

export const HookComponent = ({ hookProperty }: ChildComponentProps) => {

  useCustomHook(hookProperty); // could be anything!

  return <></>; // yes, components can render nothing

}

With great power comes great responsibility!

Hope this helps! More next time...