การสร้างระบบล็อกอินด้วย GraphQL ใน React Native

ตัวอย่างการเข้าสู่ระบบ react native โดยใช้ relay บทนำ ในบทเรียนก่อนหน้านี้ คุณได้ทำการลงทะเบียนผู้ใช้ในแอป react native ของคุณโดยใช้ back4app และ relay ในคู่มือนี้ คุณจะสร้างกลไกการเข้าสู่ระบบเพื่อเสริมฟีเจอร์การตรวจสอบสิทธิ์ในแอปของคุณ ตามที่คุณอาจทราบ parse ได้จัดเตรียมคลาสผู้ใช้ user ไว้ให้โดยค่าเริ่มต้น ซึ่งมีการเปลี่ยนแปลง graphql ที่พร้อมใช้งานเพื่อเข้าสู่ระบบผู้ใช้เมื่อจำเป็นสำหรับแอปของคุณ กระบวนการที่นี่จะคล้ายกับบทเรียนการลงทะเบียนผู้ใช้ คุณจะสร้างหน้าล็อกอินโดยใช้ formik จากนั้นฟอร์มนี้จะเรียกการเปลี่ยนแปลง relay การเปลี่ยนแปลง relay จะสื่อสารกับเซิร์ฟเวอร์ back4app เพื่อจัดการกระบวนการตรวจสอบสิทธิ์ทั้งหมด คุณสามารถเข้าถึงโครงการนี้ได้ทุกเมื่อผ่านที่เก็บ github ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ https //github com/templates back4app/react native graphql relay js users เป้าหมาย เมื่อสิ้นสุดคู่มือนี้ คุณจะมีแอปพลิเคชัน react native ที่มีฟีเจอร์การเข้าสู่ระบบผู้ใช้ที่ถูกนำไปใช้แล้ว ตามที่แสดงด้านล่าง ข้อกำหนดเบื้องต้น แอปที่สร้างขึ้นที่ back4app โดยใช้ parse server เวอร์ชัน 3 10 หรือสูงกว่า คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/relay setup คาดหวังแอปที่มีฟอร์มการลงชื่อเข้าใช้ที่เรียบง่าย ที่นี่เราจะใช้แอป expo ที่มีฟอร์มที่มีชื่อผู้ใช้และรหัสผ่าน สำหรับบทเรียนนี้ เราจะใช้ expo เป็นเฟรมเวิร์ก react native; สำหรับบทเรียนนี้ เราจะใช้ javascript เป็นภาษาการนำไปใช้เริ่มต้นของเรา; สำหรับบทเรียนนี้เราจะใช้ตัวอย่าง style css ของเรา; 1 การสร้างแบบฟอร์มเข้าสู่ระบบ หากแอปพลิเคชันมีส่วนประกอบแบบฟอร์มอยู่แล้ว ให้ไปที่ขั้นตอนที่ 2 มิฉะนั้นคุณสามารถทำตามโครงสร้างพื้นฐานของเราได้ แบบฟอร์มนี้คล้ายกับแบบฟอร์มที่ใช้ในเอกสารการลงทะเบียน คุณยังสามารถใช้เป็นพื้นฐานสำหรับการเข้าสู่ระบบได้ กรุณาไปที่ https //www back4app com/docs/react native/graphql/user sign up relay หากคุณต้องการเรียนรู้วิธีการนำไปใช้ โค้ดแบบฟอร์มเข้าสู่ระบบควรมีลักษณะดังนี้ 1 import react, {usestate} from 'react'; 2 import environment from ' / /relay/environment'; 3 import {formikprovider, useformik} from 'formik'; 4 import { button, text, textinput, view, touchableopacity } from 'react native'; 5 import styles from " / /style" 6&#x9; 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9&#x9; 10 const onsubmit = async (values) => { 11 // @todo the mutation will be implemented here 12 }; 13&#x9; 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21&#x9; 22 const {handlesubmit, setfieldvalue} = formikbag; 23&#x9; 24 if (userlogged? id) { 25 return ( 26 \<view style={ {margintop 15, alignitems 'center'} }> 27 \<text>user {userlogged name} logged\</text> 28 \</view> 29 ); 30 } 31&#x9; 32 return ( 33 \<formikprovider value={formikbag}> 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<text>username\</text> 37 \<textinput 38 name={"username"} 39 style={styles form input} 40 autocapitalize="none" 41 onchangetext={(text) => setfieldvalue("username", text)} 42 /> 43 \<text>password\</text> 44 \<textinput 45 style={styles form input} 46 name={"password"} 47 autocapitalize="none" 48 securetextentry 49 onchangetext={(text) => setfieldvalue("password", text)} 50 /> 51 \<touchableopacity onpress={() => handlesubmit()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{"sign in"}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \</view> 58 \</formikprovider> 59 ); 60 }; 61&#x9; 62 export default signin; เรียกใช้แอปพลิเคชันของคุณ และคุณจะเห็นหน้าจอที่แสดงด้านล่างนี้ โปรดดูที่ฟังก์ชัน onsubmit สังเกตว่า relay mutation จะอยู่ภายในฟังก์ชันนี้ อีกครั้ง มันไม่ใช่ปัญหาหากแอปพลิเคชันไม่ได้ใช้ formik เมื่อคุณกำลังสร้าง form component relay mutation จะต้องถูกเรียกใช้ภายในฟังก์ชัน submit เท่านั้น 2 การสร้าง mutation โดยใช้หลักการ colocation ให้เราสร้างโฟลเดอร์ใหม่ชื่อ mutations ใกล้กับ form component ที่สุด หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ colocation โปรดไปที่ https //www back4app com/docs/react native/graphql/get started relay graphql คู่มือ ในภาพด้านล่าง คุณสามารถเห็นหลักการ colocation ในการปฏิบัติ ทุกอย่างที่เกี่ยวข้องกับคอมโพเนนต์จะอยู่ใกล้กับมัน โฟลเดอร์จะห่อหุ้ม login component และภายในนั้นคุณจะสร้างโฟลเดอร์อีกอันชื่อ mutations ในโฟลเดอร์ mutations คุณจะสร้าง relay mutation รูปแบบนี้ทำงานได้อย่างสมบูรณ์แบบในโครงการขนาดใหญ่ ทุกครั้งที่คุณมีการเปลี่ยนแปลงใหม่ ให้วางมันใกล้กับคอมโพเนนต์ที่จะใช้มัน ภายในโฟลเดอร์นี้ คุณจะสร้างไฟล์ใหม่ชื่อ loginmutation js loginmutation js ตามคู่มือการทำงานกับผู้ใช้ของเรา ซึ่งเราได้อธิบายเกี่ยวกับการเปลี่ยนแปลงของ relay คุณจะสร้างฟังก์ชัน commit ตามที่แสดงด้านล่าง 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3&#x9; 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11&#x9; 12 export default { 13 commit, 14 }; ก่อนที่จะกลับไปที่คอมโพเนนต์ฟอร์ม มาสร้างตัวแปรของเราที่จะรับ fragment ของ graphql ซึ่งแทนที่การเปลี่ยนแปลง การ fragment ของ graphql คือสิ่งที่ relay compiler จะอ่านและจับคู่กับ schema graphql ก่อนที่จะทำการ commitmutation ให้คัดลอกและวางโค้ดต่อไปนี้ 1 const mutation = graphql` 2 mutation loginmutation($input logininput!) { 3 login(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; ไฟล์สุดท้าย 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation loginmutation($input logininput!) { 5 login(input $input) { 6 viewer { 7 user { 8 id 9 createdat 10 updatedat 11 username 12 } 13 sessiontoken 14 } 15 } 16 } 17 `; 18&#x9; 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21&#x9; 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29&#x9; 30 export default { 31 commit, 32 }; เนื่องจาก graphql fragment แทนที่ backend เพื่อให้ได้โค้ดของ relay mutation คุณสามารถไปที่ https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign in และค้นหา fragment รัน yarn relay yarn relay เพื่อสร้าง mutation ใหม่และอัปเดตไฟล์ หากทุกอย่างเรียบร้อยประเภทของ mutation จะถูกสร้างขึ้นและคุณสามารถดำเนินการต่อได้ 3 นำไปใช้ฟังก์ชัน on submit ขั้นตอนการส่งเป็นสิ่งที่สำคัญที่สุด ที่นี่คือที่ที่เวทมนตร์ของ relay mutation เกิดขึ้น ขั้นตอนนี้จะดึงค่าจากฟอร์มจาก formik หากแอปพลิเคชันไม่ได้ใช้ formik ค่าต้องพร้อมใช้งานที่นี่โดยไม่คำนึงถึงวิธีที่พวกเขาได้รับมัน กลับไปที่ส่วนประกอบฟอร์ม มาลงมือทำการใช้งาน relay mutation กันเถอะ นำเข้าการเปลี่ยนแปลง 1 import loginmutation from ' /mutations/loginmutation'; ภายในฟังก์ชัน onsubmit เริ่มสร้างตัวแปรอินพุต 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } ค่าต่างๆ จะถูกฉีดโดย formik ที่นี่ หากคุณไม่ได้ใช้ formik ค่าต่างๆ จะมาจากการส่งฟอร์มแบบดั้งเดิมหรืออย่างที่คุณต้องการ สุดท้าย เรียกใช้ mutation โดยส่ง props ทั้งหมด (อย่าลืมนำเข้ามา) 1 loginmutation commit({ 2 environment, 3 input, 4 oncompleted (response) => { 5 if(!response? login || response? login === null) { 6 alert('error while logging'); 7 return; 8 } 9&#x9; 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12&#x9; 13 if (sessiontoken !== null) { 14 setuserlogged(user); 15 alert(`user ${user username} successfully logged`); 16 return; 17 } 18 }, 19 onerror (errors) => { 20 alert(errors\[0] message); 21 }, 22 }); ผลลัพธ์สุดท้ายของ onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 username, 6 password, 7 }; 8&#x9; 9 loginmutation commit({ 10 environment, 11 input, 12 oncompleted (response) => { 13 if(!response? login || response? login === null) { 14 alert('error while logging'); 15 return; 16 } 17&#x9; 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20&#x9; 21 if (sessiontoken !== null) { 22 setuserlogged(user); 23 alert(`user ${user username} successfully logged`); 24 return; 25 } 26 }, 27 onerror (errors) => { 28 alert(errors\[0] message); 29 }, 30 }); 31 }; เรียกใช้โปรเจกต์ของคุณ ลงทะเบียนผู้ใช้ของคุณ และตรวจสอบที่ back4app dashboard การทำงานจะส่งค่าจากเซิร์ฟเวอร์ เมื่อได้รับโทเค็นเซสชัน แอปพลิเคชันสามารถเริ่มจัดการได้ การทดสอบโดยใช้ผู้ใช้ที่สร้างขึ้นในบทเรียนก่อนหน้า หากทุกอย่างทำงานได้ดี จะมีการแสดงการแจ้งเตือนดังต่อไปนี้ การจัดการข้อผิดพลาด เมื่อทำการเปลี่ยนแปลงการคอมมิต แอปพลิเคชันสามารถจัดการข้อผิดพลาดได้ที่ onerror โดยจะได้รับอาร์เรย์ของข้อผิดพลาดเสมอ อาร์เรย์ที่พบบ่อยที่สุดคือมีเพียงวัตถุเดียวที่มีข้อความข้อผิดพลาด ดูตัวอย่างด้านล่าง 1 { 2 "errors" \[ 3 { 4 "message" "ชื่อผู้ใช้/รหัสผ่านไม่ถูกต้อง ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "login" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "login" null 21 } 22 } จากตัวอย่างนี้คุณสามารถสร้างการจัดการข้อผิดพลาดของคุณเองได้ โดยตอนนี้ หากมีข้อผิดพลาดเกิดขึ้นเราจะแสดงมันด้วยการแจ้งเตือน 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, บทสรุป ตอนนี้คุณมีแอปพลิเคชันที่มีฟีเจอร์การลงชื่อเข้าใช้ที่ทำงานได้อย่างสมบูรณ์ ในคู่มือถัดไป คุณจะเข้าใจวิธีการออกจากระบบโดยใช้วิธีการเดียวกัน คุณจะใช้ relay mutations เพื่อเรียกใช้แบ็กเอนด์ของเรา