pipopotamasu pipopotamasu

タイトル

0からGraphQLをどう学習するか？

初めに

6月に入社しましたフロントエンドエンジニアの村上(@pipopotamasu)です。普段はideagramというプロダクトのフロントエンドをメインに開発をしています。

ideagramではフロントエンドとバックエンド間のAPIにGraphQLを採用しています。

私は今まで業務でGraphQLを使う機会がなかったので、入社を機にGraphQLの学習を本格的に始めました。

タイトル

react-hook-formとyupを使った重複チェックバリデーション

初めに

最近yupに値の重複チェックするためのいい感じの機能が入ったので、react-hook-formと組み合わせて重複チェックをする方法を備忘のため書き綴っていきます。今まではデータのネストが深い場合、ネストを遡って他のデータにアクセスしデータのバリデーションが難しかったのですが、yupのv0.29.1から追加されたtest関数のコンテキストのfromプロパティを使用することによってネストを遡ることが容易になりました。
jquense/yup#556

今回はそのfromを使用し、フォームの重複チェックバリデーションを作ってみます。

タイトル

dom参照以外でuseRefを使う

初めに(背景)

最近お仕事でReactを使い始め(ずっとVue.jsやってました)、色々と知見が溜まってきたので投稿していきます。今日はReact hooksのuseRefについてです。今までReact使ってきて、useRefはdomへの参照をしたい場合に使うものだと思っていましたが、実はそれだけだけではなかったということを最近学びましたので復習をかねて書き綴っていきます。

useRefの説明

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

step1

macにvirtualboxとwindowsのイメージをDL。多分下の記事見てやれば大丈夫。 https://qiita.com/geek_takayuki/items/97a86b1ab3d0b32a6a43

step2

画面サイズがデフォルトの設定だと小さいので、倍率変える。

	import React from 'react';
	import { useForm, useFieldArray } from 'react-hook-form';
	import { yupResolver } from '@hookform/resolvers';
	import * as yup from "yup";

	function validateDuplicatedEmail(email) {
	const { users } = this.from[1].value;
	if (users.length < 2) return true;

	let dupCount = 0;

	function validateDuplicatedEmail(email) {
	const { users } = this.from[1].value;
	if (users.length < 2) return true;

	let dupCount = 0;
	for (let i = 0; i < users.length; i += 1) {
	if (users[i].email === email) {
	dupCount += 1;
	if (dupCount > 1) {
	return false;

	const schema = yup.object().shape({
	users: yup.array(
	yup.object().shape({
	name: yup.string().required('name is required.'),
	email: yup
	.string()
	.required('email is required.')
	.email('invalid email type.')
	.test('email-dup', 'duplicated email', () => { /* バリデーションロジック */ }) // 新しく追加
	}),

	import React from 'react';
	import { useForm, useFieldArray } from 'react-hook-form';
	import { yupResolver } from '@hookform/resolvers';
	import * as yup from "yup";

	const schema = yup.object().shape({
	users: yup.array(
	yup.object().shape({
	name: yup.string().required('name is required.'),
	email: yup

	# immutable設定
	https://github.com/pipopotamasu/gql-todo/pull/31

	ver3でデフォルトonになるらしい
	https://www.apollographql.com/blog/whats-new-in-apollo-client-2-6-b3acf28ecad1#bff1

	# query, mutationの型の自動生成

	# local state manegement
	https://apollographql-jp.com/tutorial/local-state/