ลงทะเบียนผู้ใช้ด้วย GraphQL ใน React Native ด้วย Relay

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