Open4
React 色々
forwardRef
ref受け渡しの記述をショートハンドで描くことができるもの。
styled-components
graphql codegen
refetch
query Tasks {
tasks {
id
...
}
}
このようなQueryがあった時
mutationの引数にrefetchQueriesオプションを追加するとmutation実行時にrefetchを行なってくれる
const taskQuery = useTasksQuery()
const [deleteTask] = useDeleteTaskMutation({ refetchQueries: ['Tasks'] })
const [createTask] = useCreateTaskMutation({ refetchQueries: ['Tasks'] })
途中
const [createTask] = useCreateTaskMutation({
update(cache, { data }) {
if (!data) return
const task = data
cache.modify({
fields: {
tasks(existingTasks: Task[] = []) {
const newTaskRef = cache.writeFragment({
data: task,
fragment: gql`
fragment NewTask on Task {
createdAt
description
id
status
title
updatedAt
}
`
})
return [...existingTasks, newTaskRef]
}
}
})
}
})
form
typescriptでreact-hook-formのregisterをスプレッド構文で記述できなかったためeslintを変更して対処
"react/jsx-props-no-spreading": ["off"]
<Input
label="title"
defaultValue={title}
{...register('title', { required: true })}
/>
エラーを追加できるっぽい