Open4

React 色々

naokinaoki

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]
          }
        }
      })
    }
  })