การดึงข้อมูลผู้ใช้ปัจจุบันใน React Native ด้วย Relay

ดึงข้อมูลผู้ใช้ปัจจุบันโดยใช้ relay สำหรับแอป react native บทนำ หลังจากที่คุณได้ทำการลงทะเบียนผู้ใช้และเข้าสู่ระบบในแอป react native ของคุณโดยใช้ relay คุณจำเป็นต้องดึงข้อมูลผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้เพื่อทำการดำเนินการและคำขอต่างๆ ในคู่มือนี้เราจะติดตาม https //www back4app com/docs/parse graphql/graphql get current user และ https //www back4app com/docs/react native/graphql/relay query renderer เพื่อดึงข้อมูลเกี่ยวกับผู้ใช้ปัจจุบัน คำถามในรูปแบบ graphql แสดงเป็น 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } คุณสามารถเข้าถึงโครงการนี้ได้ตลอดเวลาผ่านทาง github ของเราเพื่อตรวจสอบสไตล์และโค้ดทั้งหมด https //github com/templates back4app/react native graphql relay js users เป้าหมาย สร้างคอมโพเนนต์เพื่อดึงข้อมูลเกี่ยวกับผู้ใช้ปัจจุบัน ข้อกำหนดเบื้องต้น แอปที่สร้างขึ้นที่ back4app โดยใช้ parse server เวอร์ชัน 3 10 หรือสูงกว่า คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/relay setup คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/users/react native login sample คุณต้องทำให้เสร็จสิ้น https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr สำหรับบทช่วยสอนนี้เราจะใช้ expo เป็นเฟรมเวิร์ก react native; สำหรับบทช่วยสอนนี้เราจะใช้ javascript เป็นภาษาการใช้งานเริ่มต้นของเรา; คุณสามารถเข้าถึงโครงการนี้ได้ตลอดเวลาผ่านทาง github repositories ของเราเพื่อตรวจสอบสไตล์และโค้ดทั้งหมด https //github com/templates back4app/react native graphql relay js users 1 การสร้างคอมโพเนนต์ user logged ในโฟลเดอร์คอมโพเนนต์ signin ให้สร้างไฟล์ใหม่และตั้งชื่อว่า userloggedrenderer js userloggedrenderer js ภายใน userloggedrenderer js userloggedrenderer js , มาสร้างคอมโพเนนต์ที่คล้ายกับบทเรียน query renderer แต่ในกรณีนี้ต้องการเพียงแค่ query renderer เท่านั้น โดยมี session token ที่ถูกต้องในแอปพลิเคชัน คอมโพเนนต์จะถูกเรียกและจะได้รับข้อมูลผู้ใช้ปัจจุบัน คอมโพเนนต์ query renderer จะมีลักษณะดังนี้ 1 return ( 2 \<queryrenderer 3 environment={environment} 4 query={// @todo implement the query necessary} 5 variables={null} 6 render={({error, props}) => { 7 if (error) { 8 return ( 9 \<view> 10 \<text>{error message}\</text> 11 \</view> 12 ); 13 } else if (props) { 14 // @todo implement a funcion to render the viewer 15 } 16 return ( 17 \<view> 18 \<text>loading\</text> 19 \</view> 20 ); 21 }} 22 /> 23 ); @todo แรกควรจะถูกนำไปใช้กับการค้นหาข้อมูลจากผู้ใช้ที่เข้าสู่ระบบ คำค้นหาที่ใช้สำหรับการดำเนินการนี้ได้ถูกอธิบายไว้ใน https //www back4app com/docs/parse graphql/graphql get current user 1 graphql` 2 query userloggedrendererquery { 3 viewer { 4 user { 5 id 6 createdat 7 updatedat 8 username 9 } 10 sessiontoken 11 } 12 } 13&#x9; @todo ที่สองควรจะถูกนำไปใช้กับฟังก์ชันที่จะทำการแสดงข้อมูลเกี่ยวกับผู้ใช้เฉพาะเมื่อมีอยู่ หากไม่มีข้อผิดพลาดเราจะส่งคืน rendercontent rendercontent ฟังก์ชันที่อธิบายไว้ด้านล่าง ฟังก์ชันนี้จะทำการแสดงข้อมูลผู้ใช้ปัจจุบัน (อีเมลและชื่อผู้ใช้) ในลักษณะที่ปลอดภัย 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5&#x9; 6 const {user} = viewer; 7&#x9; 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; คุณควร implement ฟังก์ชันก่อนคอมโพเนนต์ queryrenderer ผลลัพธ์สุดท้ายของคอมโพเนนต์ควรมีลักษณะดังนี้ 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import environment from ' / /relay/environment'; 4 import {text, view} from 'react native'; 5&#x9; 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11&#x9; 12 const {user} = viewer; 13&#x9; 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 return ( 22 \<queryrenderer 23 environment={environment} 24 query={graphql` 25 query userloggedrendererquery { 26 viewer { 27 user { 28 id 29 createdat 30 updatedat 31 username 32 } 33 sessiontoken 34 } 35 } 36 `} 37 variables={null} 38 render={({error, props}) => { 39 if (error) { 40 return ( 41 \<view> 42 \<text>{error message}\</text> 43 \</view> 44 ); 45 } else if (props) { 46 return rendercontent(props viewer); 47 } 48 return ( 49 \<view> 50 \<text>loading\</text> 51 \</view> 52 ); 53 }} 54 /> 55 ); 56 }; 57&#x9; 58 export default userloggedrenderer; 2 การนำเข้า userloggedrenderer ไปยังคอมโพเนนต์ signin กลับไปที่คอมโพเนนต์ formsignin แทนที่โค้ดที่คืนค่าข้อมูลผู้ใช้ปัจจุบันด้วยคอมโพเนนต์ user logged ใหม่ จาก 1 if (sessiontoken) { 2 console warn(sessiontoken); 3 return ( 4 \<view style={ { margintop 15, alignitems 'center' } }> 5 \<text>user logged\</text> 6 \</view> 7 ); 8 } ถึง 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } อย่าลืมนำเข้า userloggedrenderer userloggedrenderer 1 import userloggedrenderer from ' /userloggedrenderer'; ตอนนี้ให้รัน yarn relay yarn relay คำสั่งเพื่ออัปเดตด้วยคำถามใหม่ yarn relay yarn relay ตอนนี้จะมีการแสดงชื่อผู้ใช้หรืออีเมลที่มีโทเค็นเซสชันที่ถูกต้อง มิฉะนั้น คอมโพเนนต์จะไม่เรนเดอร์และการเข้าสู่ระบบจะทำงาน นอกจากนี้ usestate userlogged userlogged สามารถถูกลบออกจากโค้ดที่ไม่สมเหตุสมผลอีกต่อไป อย่าลืมลบมันออกจากฟังก์ชัน oncompleted ในการเปลี่ยนแปลง login บทสรุป ผลลัพธ์สุดท้ายของขั้นตอนนี้ควรจะเหมือนกับขั้นตอนสุดท้าย ข้อมูลเกี่ยวกับมันจะถูกแสดง แต่ตอนนี้ตามด้วยชื่อผู้ใช้หรืออีเมล ในเอกสารถัดไป มาสร้างปุ่มเพื่อออกจากระบบผู้ใช้นี้และทำความสะอาดเซสชัน คืนแอปสำหรับการเข้าสู่ระบบหรือการลงทะเบียน