Amplify JS V6へのアップデート方法（React Native向け）
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！
この記事では、需要が少ないかもしれませんが、 React Native 向けの Amplify JS V6 へのアップデート方法を解説しています。React でも似たような変更点もあるので、参考になれば幸いです。
概要
利用者視点での大きな変更点は以下のとおりです
- Amplify ライブラリの Import 方法
- graphql client の記述方法
- 外部依存ライブラリ
- Storage の File access levels
- Auth, PushNotifications カテゴリの関数名および引数名
変更点の詳細
Amplify ライブラリの Import 方法
今までaws-amplifyからカテゴリを Import して利用していましたが、V6 からは必要な関数のみの Import に変更されています。
// V5
import { Auth } from 'aws-amplify';
await Auth.signUp(input);
// V6
import { signUp } from 'aws-amplify/auth';
await signUp(input);
jest を導入している場合は、mock も関数ごとに作成する必要があるので少し手間かもしれません。
graphql client の記述方法
API カテゴリの graphql client 周りの書き味が変更されています。
// V5
import { API, graphqlOperation } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api';
await API.graphql({
query: createTodo,
variables: {
input: todo,
},
});
// 昔からの記述方法
await API.graphql(graphqlOperation(createTodo, { input }));
// V6
import { generateClient } from 'aws-amplify/api';
const client = generateClient();
await client.graphql({
query: createTodo,
variables: { input },
});
私のプロジェクトは V5 以前からの昔ながらの書き味だったので、修正点が増えました。
外部依存ライブラリ
Auth カテゴリに必要な外部のライブラリがamazon-cognito-identity-jsではなく Amplify 独自のものに変更されています。また、SNS SignIn を導入している場合に必要な Web リダイレクト処理用のライブラリが 3rd ライブラリから Amplify 独自のものに変更されています。
// V5
{
"dependencies": {
"aws-amplify": "5.3.13",
"amazon-cognito-identity-js": "6.3.7",
// SNS SignInを導入している場合
"react-native-inappbrowser-reborn": "3.7.0",
}
}
// V6
{
"dependencies": {
"aws-amplify": "6.0.6",
"@aws-amplify/react-native": "1.0.3",
// SNS SignInを導入している場合
"@aws-amplify/rtn-web-browser": "1.0.3",
}
}
これに伴いリダイレクト処理用の関数設定が不要になりました。
// V5
async function urlOpener(url: string, redirectUrl: string): Promise<void> {
await InAppBrowser.isAvailable();
const authSessionResult = await InAppBrowser.openAuth(url, redirectUrl, {
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: false,
ephemeralWebSession: false,
});
if (authSessionResult.type === 'success') {
Linking.openURL(authSessionResult.url);
}
}
Amplify.configure({
...awsconfig,
oauth: {
...awsconfig.oauth,
urlOpener,
},
});
// V6
// 不要
Storage の File access levels
Storage カテゴリのファイルアクセスレベルが変更されています。
今までpublicと記載していたいずれのユーザーからもアクセス可能な領域が、guestになっています。
// V5
type AccessLevel = 'public' | 'protected' | 'private';
// V6
type AccessLevel = 'guest' | 'protected' | 'private';
ただし、S3 上は今まで通りpublic/パスなのでご注意ください。
Auth, PushNotifications カテゴリの関数名および引数名
Auth カテゴリと PushNotifications カテゴリの関数名や引数名が大幅に変更されています。
例えば、SNS SignIn だと以下のとおりです。
// V5
import { Auth } from 'aws-amplify';
import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
const handleGoogleSignIn = async () => {
const credentials = await Auth.federatedSignIn({
provider: CognitoHostedUIIdentityProvider.Google,
});
};
const handleSocialSignIn = () => {
Auth.federatedSignIn({
customProvider: 'SocialProvider',
});
};
// V6
import { fetchAuthSession, signInWithRedirect } from 'aws-amplify/auth';
const handleGoogleSignIn = async () => {
await signInWithRedirect({
provider: 'Google',
});
};
const handleSocialSignIn = () => {
signInWithRedirect({
provider: {
custom: 'SocialProvider',
},
});
};
詳細については、マイグレーションガイドをご覧ください。
おまけ（Push 通知設定）
Push 通知用のライブラリですが、今年の 6 月に V5 段階ですでに大幅な変更がありました。
外部依存していたライブラリを Amplify 独自のものに変更されています。
また、その変更に合わせて、Amplify.configureの記述方法も大幅に変更されています。
Amplify.configure({
Notifications: {
Push: {
AWSPinpoint: {
appId: '<app-id>',
region: '<region>',
},
},
},
});
各種設定（init 処理など）にもクセがありますので、公式ドキュメントの通りに設定することをお勧めします。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion