I use react-hook-form for both web and react native without a single problem. Great library. When using react-hook-form v6. I encountered an issue where the validation works perfectly in code, but in test, the errors
object is always empty even for wrong value. Let’s see how to solve it. In this blog, I will demostrate how to test react-hook-form
with react-native-testing-library
for both iOS and Android within one test through jest-expo
, and yes, we will use jest
as the test runner.
How to utilize the return type of a function parameter in TypeScript
Recent in my side-project. I’ve got an interesting requirement. I’ve a React Hook function useRxQuery(queryFunc)
for getting data from RxDB
. It takes a simple query function queryFunc
as the argument takes an RxDB
instance, and returns with data. Inside the hook, it does the preparation, executes that query function queryFunc
, and returns the data: T
.
So, how to auto-type the ReturnType<>
of the hook function useRxQuery
, such that whatever return from that query function queryFunc
should be taken as the return type of the function useRxQuery
automatically.
Let’s solve it with the infer
keyword in Typescript, and you can make your code much more robust in the future.
Setup Monorepo via Yarn workspace for Serverless Framework and Expo with Typescript
I created a universal app with Expo for native mobile and web. It works wonderfully. I think a monorepo for local code sharing should efficient than publishing to a private package to Github registry (It works like a charm though).
I thought it’s just a 5 min setup. But I was wrong… Still very easy though. In this blog, we will use monorepo to share code between the backend(Serverless framework) and frontend(Expo).
I always try my best to introduce less overhead and less dependencies to solve a problem.
Our goals
Yarn
only withoutlerna
: Less overhead. And We do not needlerna
- Yarn version:
v1.22.4
- Typescript support for all three modules
- I just want to focus on coding without worrying about building pipeline
- No no no, no Babel, that’ll introduce loads of dev-dependencies, I want a clean tree.
- I will show you how to use as well
How to solve the callback response already delivered warning when writing AWS lambda
If you have ever receive this warning from the log of your lambda,
WARNING: Callback/response already delivered. Did your function invoke the callback and also return a promise? For more details, see: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html
I got this when implementing Cognito lambda trigger of the PreSignUp step.
Let’s see how to solve it.
How to resolve require the cfnRole option warning for serverless framework
Serverless framework
is an awesome tool for AWS lambda. For a new project, if you have seen this warning when deploying:
Warned - no cfnRole set:
Require the cfnRole option, which specifies a particular role for CloudFormation to assume while deploying.
It is a typical permission problem, let’s see how to solve it.
How to set Git branch name as environment variable in next.js
It has something to do with the next.config.js
.
How to apply different layout to React Router routes
Most of the SaaS sites has a similar pattern, marketing pages, pages after login. Marketing pages may or may not share elements in terms of the layout, but the pages after login will share something like sub-nav, top nav, modules, things like that. I use React outer v5
with Typescript
. It is easy, but it took some time.
How to use Graphql Shield with Apollo Server to authorize JWT
Graphql Shield is a nice library to centralize your authorization rules. But how to use it with Apollo Server? Let’s see. For example, what about I want to do authorization according to the information in JWT?
How to test React-Redux hooks via Jest
I love the new hooks from redux-react
. It simplify things a lot. Let’s see how to test it.
TBH, the solutions can be applied to any react hooks
.
How to update Apollo Cache via React Hooks after calling REST api
Apollo local cache (InMemoryCache) works super great, but recently I have a problem with it, the UI re-renders when updating the cache after a GraphQL mutation, but not after I calling a traditional REST api and try to update the cache directly. The intention is simple, I want to update the local cache directly and re-render the UI. Let’s see how to solve it.