DEV Community: Kay Gosho

I've created knex-graphql-utils, which optimizes your GraphQL server with PostgreSQL

Kay Gosho — Sat, 24 Jul 2021 13:09:29 +0000

I've created a tiny library which improves performance for GraphQL + Knex.

tl;dr

Before

After

Filter select columns based on a query from clients
Load relations without N+1 problem (pagination available!)

https://github.com/acro5piano/knex-graphql-utils

Currently only PostgreSQL is supported, but I'll support other RDBMS too if needed.

Motivation

Creating a GraphQL service with a Relational Database is a hard thing. We should take care of:

Performance for querying relations. N+1 problem will happen if you don't use Dataloader.
select * make your server slow, but hard to filter columns based on requests.
Pagination. Dataloader pattern is hard to implement pagination without a hacky union or window functions. knex-graphql-utils uses row_number() window function to do it.

As a developer, I noticed that I'm doing the same thing again and again - so I convert my work into a library.

The syntax is like this:

Please try it! Any feedback is welcome.

https://github.com/acro5piano/knex-graphql-utils

Step-by-step guide to add request ID to all SQL logs with Async Local Storage

Kay Gosho — Wed, 19 May 2021 01:59:34 +0000

Logging is important for all production-ready service. It will significantly affect our productivity when a issue happens.

With request ID, we can track a user's request without grepping every rows with our eyes. Just filtering with the unique request ID and things done. Almost all logging service has filtering feature, so it's a quite portable way.

Since Node.js typically runs on a single threaded environment, it requires a trick to add request ID for each logs. The trick was domain API for a long time, but now you can use AsyncLocalStorage to create thread-like context.

I'll show you how to do it.

NOTE: AsyncLocalStorage has performance impact, but I think easy logging is more important than performance.

The code

In this example I use Fastify and Knex and pino with TypeScript, but the idea should be used with every technologies.

https://github.com/acro5piano/knex-fastify-async-local-storage-example

Step 1 - Setup

Nothing special.

yarn add fastify knex nanoid pino pino-pretty sqlite3

# For easy development
yarn add -D esbuild-register @types/node @types/pino typescript

Step 2 - create an execution context

This is a key part. AsyncLocalStorage contains data which is unique for each request.

// src/executionContext.ts

import { AsyncLocalStorage } from 'async_hooks'

type ContextKey = 'reqId'

export const executionContext = new AsyncLocalStorage< string>()

Step 3 - create logger

This logger adds reqId to every records. You must log everything with this logger (not use console.log).

// src/logger.ts

import pino from 'pino'
import { executionContext } from './executionContext'

export const logger = pino({
  prettyPrint: true,
  mixin() {
    return {
      reqId: executionContext.getStore(),
    }
  },
})

Step 4 - create Knex

Use our logger for query logging. It automatically adds reqId.

Disclaimer: For simplicity, I don't add log reduction settings. If you use it on production service, don't forget to hide sensitive information from logs.

// src/db.ts

import createKnex from 'knex'
import { logger } from './logger'

export const db = createKnex({
  client: 'sqlite3',
  connection: ':memory:',
  useNullAsDefault: false,
})

// Log every query with our logger
db.on('query', ({ sql, bindings }) => {
  logger.info({ sql, bindings }, 'SQL')
})

Step 5 - create main HTTP server (Fastify)

Fastify has logging feature by specifying logger option. request.log.info automatically adds reqId which might be enough for small services. However, using our executionContext we can add reqId to every log records, including SQL log!

To do so, create Fastify instance first:

// src/app.ts

import Fastify from 'fastify'
import { nanoid } from 'nanoid'
import { logger } from './logger'
import { executionContext } from './executionContext'
import { db } from './db'

export const app = Fastify({
  logger,
  genReqId: () => nanoid(), // the default is increment, but nanoid is easier for tracing
  disableRequestLogging: true, // we do it on our own
})

// Create a database table for logging (just for example)
app.addHook('onReady', async () => {
  await db.schema.createTable('logs', (t) => {
    t.bigIncrements()
    t.string('message').notNullable()
    t.string('req_id').notNullable()
    t.timestamp('created_at').notNullable().defaultTo(db.fn.now())
  })
})

// ...

Then, register a hook which wraps request handling in the context. Without this, we cannot access the context!

// src/app.ts

// ...

// Add hook to run all operations on the request context
app.addHook('preHandler', (_, __, next) => {
  executionContext.run(request.id, next)
})

// ...

Okay, we set reqId to the context! Let's try the logging feature:

// src/app.ts

// ...

// Log request
app.addHook('preHandler', (request, _, next) => {
  const { method, url, ip } = request
  logger.info({ method, url, ip }, 'incoming request')
  next()
})

// ...

It adds reqId.

Next, let's confirm the reqId will appear in SQL query logs:

// src/app.ts

// ...

// Main routing
app.get('/', async (_, reply) => {
  await db('logs').insert({
    message: 'incoming request',
    req_id: executionContext.getStore()!.get('reqId'),
  })
  reply.send('ok')
})

// ...

It will emits the following log.

Conclusion

Request ID tracking is really important to investigate bugs.

If you have any feedback, please leave a comment!

How to disable Bluetooth become audio source instead of audio sink on Linux

Kay Gosho — Wed, 12 May 2021 12:31:26 +0000

After struggled with Amazon Alexa, Bluez, PulseAudio.

/etc/bluetooth/main.conf

[General]

-Enable=Source,Sink,Media,Socket
+Enable=Sink,Media,Socket

I've replaced husky with simple-git-hooks

Kay Gosho — Sun, 11 Apr 2021 14:26:23 +0000

I've been using husky for over 2 years and was a big fan of it. However, husky v5 enforces us to update our husky configuration.

Since v5 design concept is completely different from v4, we should update husky configuration file and create .husky directory regarding to the documentation. Then add some test commits and confirms our migration has been completed.

https://github.com/typicode/husky

To be honest, I was disappointed these changes. I understand maintaining OSS is a hard task and there should be an appropriate reason, but I don't want to "migrate" these changes. "Just work" is the best and there should not be a long documentation.

https://typicode.github.io/husky/

My colleague's PC didn't trigger a pre-commit hook which made me mad. I'm sorry for people who sends pull requests to my own OSS.

Furthermore, I personally don't like the design of husky v5. Why we should create the .husky directory, what will happen on husky install? What is husky.sh and .husky/_?

Also, husky changes .git/config without confirmation, which might cause issues using with other git hooks tools. I just wanted to run Prettier before git commit!

I've ended up to say goodbye to husky and install simple-git-hooks. It works like a charm!

https://github.com/toplenboren/simple-git-hooks

The setup is pretty easy. All we should do is:

yarn add -D simple-git-hooks

  "scripts": {
    "prepare": "simple-git-hooks"
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  }

I'll live with simple-git-hooks. Thank you @toplenboren .

If you migrate from husky, don't forget to revert the git config husky modified.

yarn remove husky
rm -rf .husky
git config core.hooksPath .git/hooks/

Step by step guide of how to painlessly type GraphQL execution result

Kay Gosho — Fri, 09 Apr 2021 05:55:19 +0000

Recently mixing TypeScript and GraphQL is becoming a defacto standard of modern web development. However, there is not so much information of how to combine them without hassle.

In conclusion, I've found Fragment first approach should painlessly work with TypeScript. Why? it accelerates type definition's reusability. Let's see how it works.

[edited]
I realized that Colocating Fragment is the best for GraphQL + TypeScript while trying to implement some real-world frontend projects (as freelance jobs). That pattern is a little verbose, but declarative and easily scalable. So instead of reading this article, you should read carefully: https://www.apollographql.com/docs/react/data/fragments/#colocating-fragments
[/edited]

Step 1 - No type

In the example from react-apollo, you can see the following code.

import { useQuery, gql } from "@apollo/client"

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ))
}

It looks nice, but imagine the type of data. Yes, it is any. It breaks type-safety and you will go mad!

Note: technically not any but Record, although they are almost same in this context

Step 2 - Type manually

To avoid data become any, we can type the query result using TypeScript's generics feature.

import { useQuery, gql } from "@apollo/client"

interface GetExchangeRates {
  rates: {
    currency: string
    rate: number
  }[]
}

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`

function ExchangeRates() {
  const { loading, error, data } = useQuery<GetExchangeRates>(EXCHANGE_RATES)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  // Type signature of `data` is:
  // {
  //   rates: {
  //     currency: string
  //     rate: number
  //   }[]
  // }

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ))
}

As you can see, this is so painful! Every time you update your query, you should manually update its interface too.

Step 3 - Type codegen

Fortunately, we can generate TypeScript's type definitions from GraphQL queries using apollo-tooling.

https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output

Note: there are some tools other than apollo, but I prefer apollo because it is the most minimal one.

Let's execute some commands to create type definitions.

npx apollo client:codegen \
  --localSchemaFile schema.gql \
  --target typescript \
  --includes 'src/**/*.{ts,tsx}'

Note: If you run the above command it will fail, because you won't have schema.gql in local.

Ensure you have schema.gql. Your GraphQL server should have the feature to emit your GraphQL schema to a file.

After the command, you will see a output file including code like this:

// __generated__/GetExchangeRates.ts

export interface GetExchangeRates_rate {
  currency: string
  rate: number
}

export interface GetExchangeRates {
  rates: GetExchangeRates_rate[]
}

So we can replace the last code with the generated types:

import { useQuery, gql } from "@apollo/client"
import { GetExchangeRates } from "./__generated__/GetExchangeRates"

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`

function ExchangeRates() {
  const { loading, error, data } = useQuery<GetExchangeRates>(EXCHANGE_RATES)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ))
}

This is much easier!

The downside is that we should run the command to generate type definitions every time we edit GraphQL code, but it is far easier than manual typing.

I think it is enough for smaller projects. But if the project grows, there will be a problem - type reusability.

Step 4 - Reuse type definitions

Thanks to apollo, we can generate type definitions. However, how to reuse these type definitions?

Imagine we want to separate our component like this:

// ExchangeRates.tsx

import { useQuery, gql } from "@apollo/client"
import { GetExchangeRates } from "./__generated__/GetExchangeRates"
import { ExchangeRateItem } from "./ExchangeRateItem"

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`

function ExchangeRates() {
  const { loading, error, data } = useQuery<GetExchangeRates>(EXCHANGE_RATES)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.rates.map((rate) => (
    <ExchangeRateItem rate={rate} key={rate.currency} />
  ))
}

// ExchangeRateItem.tsx

import { GetExchangeRates_rate } from "./__generated__/GetExchangeRates"

interface ExchangeRateItemProps {
  rate: GetExchangeRates_rate
}

export function ExchangeRateItem({ rate }: ExchangeRateItemProps) {
  const { currency, rate } = rate
  return (
    <div>
      <p>
        {currency}: {rate}
      </p>
    </div>
  )
}

As you can see, we can import common GraphQL type definitions from generated code. However, it should become messy because:

The child component relies on parent's component query.
Hard to re-use ExchangeRateItem because of tied couple of a specific query.
Dependency flow is not linear; ExchangeRateItem -> __generated__ -> ExchangeRates -> ExchangeRateItem

Note: Technically __generated__ does not depends on ExchangeRates, but conceptually it depends, as type definitions are generated from it.

I haven't fully figured out how to handle this, but have two solutions for it using Fragment.

Step 4.1 - Create common Query and Fragment

The first one is based on Domain Separation. The idea is to create common GraphQL related files and write logic there instead of components:

// graphql/Rate.ts

import { useQuery, gql } from "@apollo/client"
import {
  GetExchangeRates,
  GetExchangeRates_rate,
} from "./__generated__/GetExchangeRates"

// Re-export fragment type because of reusability
export type { RateFragment } from "./ExchangeRateItem"

const RATE_FRAGMENT = gql`
  fragment RateFragment on Rate {
    currency
    rate
    # ...And other props in the future
  }
`

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      ...RateFragment
    }
  }
  ${RATE_FRAGMENT}
`

export const useRates = () => useQuery<GetExchangeRates>(EXCHANGE_RATES)

// Other fragments, hooks, queries will follow

// ExchangeRates.tsx

import { useRates } from "./graphql/Rate"
import { ExchangeRateItem } from "./ExchangeRateItem"

function ExchangeRates() {
  const { loading, error, data } = useRates()

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.rates.map((rate) => (
    <ExchangeRateItem rate={rate} key={rate.currency} />
  ))
}

// ExchangeRateItem.tsx

import { RateFragment } from "./graphql/Rate"

interface ExchangeRateItemProps {
  rate: RateFragment
}

export function ExchangeRateItem({ rate }: ExchangeRateItemProps) {
  const { currency, rate } = rate
  return (
    <div>
      <p>
        {currency}: {rate}
      </p>
    </div>
  )
}

Since we move GraphQL code to ./graphql/Rate, the dependency became linear again;

ExchangeRates -> graphql/Rate -> __generated__
ExchangeRates -> ExchangeRateItem -> graphql/Rate -> __generated__

Using Fragment, code for GraphQL became a little longer and verbose. However, it has a benefit of Separation of Concerns.

graphql/Rate knows how to fetch data.
graphql/Rate exposes its interface.
ExchangeRates and ExchangeRateItem don't know how to fetch data. They don't depend on implementation but interface of data source and type.

And the code on our components become smaller, which is also great for frontend devs.

Step 4.2 - Colocated Fragments

Another solution is to use a pattern called "Colocated Fragments" where child components declare which data is needed.

// ExchangeRates.tsx

import { useQuery, gql } from "@apollo/client"
import { ExchangeRateItem, RATE_ITEM_FRAGMENT } from "./ExchangeRateItem"

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      ...RateItemFragment
    }
  }
  ${RATE_ITEM_FRAGMENT}
`

function ExchangeRates() {
  const { loading, error, data } = useQuery<GetExchangeRates>(EXCHANGE_RATES)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.rates.map((rate) => (
    <ExchangeRateItem rate={rate} key={rate.currency} />
  ))
}

// ExchangeRateItem.tsx

import { gql } from "@apollo/client"
import { RateItemFragment } from "./__generated__/RateItemFragment"

export const RATE_ITEM_FRAGMENT = gql`
  fragment RateItemFragment on Rate {
    currency
    rate
    # ...And other props in the future
  }
`

interface ExchangeRateItemProps {
  rate: RateItemFragment
}

export function ExchangeRateItem({ rate }: ExchangeRateItemProps) {
  const { currency, rate } = rate
  return (
    <div>
      <p>
        {currency}: {rate}
      </p>
    </div>
  )
}

In that way, we achieve:

We don't have to separate GraphQL code form components which needs it
We don't have to update fields manually when required data changes
Easy to read code

For more details, please visit: https://www.apollographql.com/docs/react/data/fragments/#colocating-fragments

Codegen tools other than Apollo

TypedDocumentNode

@urigo recommended TypedDocumentNode. I have never tried the library, but he is one of the smartest GraphQL developer so you should check it out!

https://the-guild.dev/blog/typed-document-node

@graphql-codegen/cli

This is made by the CTO of The Guild, and widely used. I haven't tried it in my project yet, but it covers almost all of major tools.

https://github.com/dotansimha/graphql-code-generator

Conclusion

Use apollo-tooling or other tools to type GraphQL result
Separate GraphQL related code into a directory (if you think your project is large)
Use Fragment to create common reusable type

If you have any thoughts, please post a comment!

fzf.vim GFiles enhancement for monorepo

Kay Gosho — Thu, 21 May 2020 05:51:54 +0000

I'd like fzf.vim GFiles to add my current directory to initial query.

Before:

After:

I end up to create a custom command GFilesMonorepo. Here is the implementation:

" ported from https://github.com/junegunn/fzf.vim/blob/master/autoload/fzf/vim.vim#L546
function! s:get_git_root()
  let l:root = split(system('git rev-parse --show-toplevel'), '\n')[0]
  if v:shell_error
      return ''
  endif
  return l:root
endfunction

function! s:gitfiles_monorepo()
  let l:root = s:get_git_root()
  let l:path = substitute(getcwd(), l:root, '', '')
  let l:path = substitute(l:path, '/', '', '')

  let l:options = '-m --preview "head -20 {1}" --prompt "GitFiles> " '
  if l:path != ''
    let l:options .= '--query '.l:path
  endif

  call fzf#run({
  \ 'source':  'git ls-files | uniq',
  \ 'sink': 'e',
  \ 'dir': l:root,
  \ 'options': l:options,
  \ 'down':    '40%'
  \})
endfunction
command! GFilesMonorepo call s:gitfiles_monorepo()

Run Docker containers with Fargate CLI + Terraform in AWS

Kay Gosho — Mon, 04 May 2020 08:40:17 +0000

I am running applications in production with AWS ECS Fargate provisioning with Terraform. I was suffering that Terraform scripts (HCL) tends to be very long because it defines infrastracture atomically and manually, so I was looking for some tools to reduce them.

This time I found Fargate CLI very useful to keep provisioning scripts very simple. Let me introduce it!

Demo project: https://github.com/acro5piano/terraform-fargate-example

Summary

Create basic AWS ECS environment using Terraform
Create fargate services and task definitions using Fargate CLI
Deploy applications with Fargate CLI, without downtime

Motivation

There are some options to create an production ECS Fargate environment:

Using the AWS management console
AWS CLI
ECS CLI
Terraform
Fargate CLI

Each of them has cons:

makes the environment quite implicit, finally nobody understands the infrastructure
is hard to configure, and it does not re-create & reverse the environment, so almost same as (1)
does not create everything; Security Groups and ALB, and so on
enables to provision everything as code, but makes the scripts very long and difficult to update the service
does not create everything; Security Groups and ALB, and so on (same as (3))

So I would like to suggest mixing (4) and (5) and take good parts of them.

Please take a look at the complete code here:

https://github.com/acro5piano/terraform-fargate-example

Step-by-Step guide

Assuming we are creating a simple web app.

Dockerfile

Anything is okay if it listen port 3000.

# Dockerfile

FROM python:3.7.7-alpine3.11

CMD python -m http.server 3000

Terraform

Terraform has the following responsibilities:

Creating an ECS cluster (which runs the Fargate service)
Creating two Security Groups (which is like firewall)
- ALB
- ECS (which is allowed to communicate only with ALB)

Please replace the content or the file path for aws-credentials.ini depends on your environment.

# main.tf

# depends on your environment
provider "aws" {
  region                  = "ap-northeast-1"
  shared_credentials_file = "./aws-credentials.ini"
  profile                 = "default"
}

resource "aws_ecs_cluster" "webapp" {
  name = "webapp"
}

resource "aws_security_group" "webapp" {
  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
  ingress {
    from_port       = 3000
    to_port         = 3000
    protocol        = "tcp"
    security_groups = [aws_security_group.webapp_lb.id]
  }
}

resource "aws_security_group" "webapp_lb" {
  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
  ingress {
    from_port   = 80
    to_port     = 80
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

output "webapp_ecs_security_group" {
  value = aws_security_group.webapp.id
}

output "webapp_lb_security_group" {
  value = aws_security_group.webapp_lb.id
}

Note: We set output to gettings the value easily later.

Fargate CLI

Next, let's create a Fargate Service with Fargate CLI.

To install Fargate CLI, please visit the following link:

https://github.com/awslabs/fargatecli/releases

And run the following script.

Please replace the content or the file path for aws-credentials.ini depends on your environment.

#!/bin/bash

# create.sh

export AWS_SHARED_CREDENTIALS_FILE=$PWD/aws-credentials.ini
export AWS_PROFILE=default
export AWS_REGION=us-east-1

# First, create ALB
fargate lb create webapp \
    --cluster webapp \
    --port HTTP:80 \
    --security-group-id `terraform output webapp_lb_security_group`

# Next, create Fargate Service
fargate service create webapp \
    --cluster webapp \
    --lb webapp \
    --num 1 \
    --port HTTP:3000 \
    --cpu 256 \
    --memory 512 \
    --security-group-id `terraform output webapp_ecs_security_group`

The fargate service create command can take --image argument explicitly, but without the argument Fargate CLI will:

Build Dockerfile under the current directory
Push the docker image to ECR
Create a service based on the image

Confirm

Confirm the service has been created:

$ fargate lb list --cluster webapp

NAME    TYPE            STATUS  DNS NAME                                        PORTS
webapp  Application     Active  webapp-xxxxxxxxxx.us-east-1.elb.amazonaws.com   HTTP:80

Open webapp-xxxxxxxxxx.us-east-1.elb.amazonaws.com and your service is running!

What is created?

By Terraform:

ECR Repository
ECS Cluser
EC2 Security Group

By Fargate CLI:

ECS Task Definition
ECS Service
ECS Task
ECS Task Execution Role
ALB
ALB Target Group
CloudWatch Log Group

Update service

We can update service (deploy) without downtime thanks to Fargate:e

$ fargate service deploy webapp --cluster webapp

Delete

Unfortunately Fargate CLI doesn't have idempotency, but deleting is supported:

$ fargate service scale webapp 0 --cluster webapp
$ fargate service destroy webapp --cluster webapp
$ fargate lb destroy webapp
$ terrform destroy

Note: ECS Execution Role will not be deleted.

Conclusion

I'm glad if you find Fargate CLI very useful tool to create ECS Fargate service.

You can write further DevOps tools for your project based on these code. The demo repository contains Makefile wrapper script of fargate, which make things more simpler. Please take a look:

https://github.com/acro5piano/terraform-fargate-example

useReducer in TypeScript, strictly typed version

Kay Gosho — Fri, 27 Mar 2020 06:49:18 +0000

https://reactjs.org/docs/hooks-reference.html#usereducer

interface Action<T extends string, P = undefined> {
  type: T
  payload: P
}

type Actions = 
  | Action<'increment', { by: number }>
  | Action<'decrement', { by: number }>
  | Action<'reset', { to: number }>

type Reducer<S, A extends Action<any, any>> = (s: S, a: A) => S

const INITIAL_STATE = {
  count: 0,
} as const

const reducer: Reducer<typeof INITIAL_STATE, Actions>(state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.payload.by };
    case 'decrement':
      return { count: state.count - action.payload.by };
    case 'reset':
      return { count: action.payload.to };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement', payload: { by: 1 })}>-</button>
      <button onClick={() => dispatch({ type: 'increment', payload: { by: 1 }})}>+</button>
      <button onClick={() => dispatch({ type: 'reset', payload: { to: 0 } })}>+</button>
    </>
  );
}

Getting initial notification in React Native

Kay Gosho — Thu, 19 Dec 2019 04:25:49 +0000

Getting initial notification in React Native seems not to work RN 0.59.x.

https://github.com/react-native-community/react-native-push-notification-ios/issues/24

I'll try to find a solution. current possible solutions in my mind are:

1. Save userData in `didReceiveRemoteNotification`

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];

  // save userData to somewhere
}

2. Build a native module

Accessing userData via Native modules. It seems that we can access to userData after app launch.

https://github.com/react-native-community/react-native-push-notification-ios/blob/master/js/index.js#L346

https://github.com/react-native-community/react-native-push-notification-ios/blob/3cf608c83dac011634429fbebd7d55a7c6ae8c13/ios/RNCPushNotificationIOS.m#L407

UIApplicationLaunchOptionsRemoteNotificationKey not getting userinfo - https://stackoverflow.com/questions/30297594/uiapplicationlaunchoptionsremotenotificationkey-not-getting-userinfo

I've created monor - an interactive monorepo command executor

Kay Gosho — Thu, 21 Nov 2019 02:26:05 +0000

I've created monor, which is an interactive monorepo command executor. It filters all commands under Yarn Workspaces and executes them concurrently.

https://github.com/acro5piano/monor

What is monorepo?

Monorepo is a common pattern to management multiple packages.

The key concept is to include all related code into one repository other than split into multiple repositories. In monorepo project, each package can refer to each other which enables to sync packages version and dependencies.

A lot of open source projects, including React/Vue/Babel ...etc, use this pattern nowadays to manage their huge codebases.

What is Yarn Workspace?

Yarn Workspace is a simple tool to manage monorepo. It is built-in feature of Yarn so if you use Yarn it means you can use Yarn Workspace out of the box.

For more information, please take a look at:

https://yarnpkg.com/lang/en/docs/workspaces/

Why monor?

Every time I run Yarn Workspaces commands, we have to type yarn workspace @myapp/package start, which is a kind of hard work.

With monor, you can select your workspaces command interactively.

Getting started

Install it globally:

npm -g install monor

Then just run monor to list all of your commands under your workspaces:

monor

Features

Read all scripts package.json under yarn workspaces' packages
List and execute commands interactively
Run multiple commands concurrently

Development Status

Still in Beta. If you have any suggestions or feature requests, feel free to open new issues or Pull Requests!

Please run the following commands after you clone it:

yarn install
yarn example
yarn test:unit
yarn test:e2e

Exit CircleCI jobs if changed files do not match specific pattern

Kay Gosho — Fri, 08 Nov 2019 07:52:16 +0000

As of Circle CI 2.1, we can define custom commands and new CircleCI CLI.

I found the following code is useful to exit CircleCI jobs when some specific file/directory was changed in the latest commit:

# .circleci/config.yml

commands:
  check-changed-files-or-halt:
    parameters:
      pattern:
        type: string
    steps:
      - run: git show -m HEAD --name-only --pretty="" | egrep -q '<< parameters.pattern >>' || circleci step halt

jobs:
  test:
    executor: node
    steps:
      - attach-workspace
      - check-changed-files-or-halt:
          pattern: ^(src|test)|(.js|ts)$
      - run: yarn install
      - run: yarn test

However, the command git show -m HEAD --name-only --pretty="" only shows the latest commit's change, so use with merging Pull Request with tasks such as deployment.

Ref: https://discuss.circleci.com/t/ability-to-return-successfully-from-a-job-before-completing-all-the-next-steps/12969/7

Use the same screen navigation animation both on Android/iOS with React Native + React Navigation

Kay Gosho — Wed, 28 Aug 2019 16:49:30 +0000

React Navigation's default screen navigation on Android looks strange, because it creates modals even if "swipe to left" closes the modal:

I would like the animation to slide from left to right in the same way on iOS:

The solution is very simple:



import {
  createAppContainer,
  createStackNavigator,
  StackViewTransitionConfigs,
} from 'react-navigation'

const Navigation = createStackNavigator({
  screenA: ComponentA,
  screenB: ComponentB,
}, {
  mode: 'card',
  transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}

export const AppNavigation = createAppContainer(Navigation)

I wonder why this is the default behavior...

Ref

https://stackoverflow.com/questions/48018666/how-to-change-the-direction-of-the-animation-in-stacknavigator

DEV Community: Kay Gosho

I've created knex-graphql-utils, which optimizes your GraphQL server with PostgreSQL

tl;dr

Before

After

Motivation

Step-by-step guide to add request ID to all SQL logs with Async Local Storage

The code

Step 1 - Setup

Step 2 - create an execution context

Step 3 - create logger

Step 4 - create Knex

Step 5 - create main HTTP server (Fastify)

Conclusion

How to disable Bluetooth become audio source instead of audio sink on Linux

I've replaced husky with simple-git-hooks

Step by step guide of how to painlessly type GraphQL execution result

Step 1 - No type

Step 2 - Type manually

Step 3 - Type codegen

Step 4 - Reuse type definitions

Step 4.1 - Create common Query and Fragment

Step 4.2 - Colocated Fragments

Codegen tools other than Apollo

TypedDocumentNode

@graphql-codegen/cli

Conclusion

fzf.vim GFiles enhancement for monorepo

Run Docker containers with Fargate CLI + Terraform in AWS

Summary

Motivation

Step-by-Step guide

Dockerfile

Terraform

Fargate CLI

Confirm

What is created?

Update service

Delete

Conclusion

useReducer in TypeScript, strictly typed version

Getting initial notification in React Native

1. Save userData in didReceiveRemoteNotification

2. Build a native module

I've created monor - an interactive monorepo command executor

What is monorepo?

What is Yarn Workspace?

Why monor?

Getting started

Features

Development Status

Exit CircleCI jobs if changed files do not match specific pattern

Use the same screen navigation animation both on Android/iOS with React Native + React Navigation

Ref

1. Save userData in `didReceiveRemoteNotification`