نوشته های علیرضا توکل

تنظیمات( کانفیگ) Apollo و GraphQL در React Native

علیرضا توکل — Sat, 01 Aug 2020 11:21:50 +0430

یه نقل معروفی هست میگه برو داکشو بخون یاد میگیری ولی در مورد Apollo client تو ری اکت نیتیو اصلا صدق نمیکنه.داکش به شرح زیره: https://www.apollographql.com/docs/react/integrations/react-native/ ابتدای امر بریم کلاینت آپولو و متعلقاتش رو نصب کنیمyarn add @apollo/client @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link apollo-upload-client @lifeomic/axios-fetch axiosصب کن ببینم چرا انقدر وابستگی داریم نصب میکنیم؟ متاسفانه یا من یا خود آپلو راه رو درست نرفتیم و کلی به conflict خوردم موقع نصب این شد که همه اینارو باهم نصب میکنیم که آپلو کلاینت به عدم وجود peer dependencies گیر نده. قبل از اینکه Provider رو بیاریم تو کار بریم ابتدا یک کانفیگ مناسب برای Apollo بنویسیم توجه کنید که دیفالت آپلو خیلی چیزا نداره و کلا دستتون رو باز گذاشته که هرچی دوست دارید بهش پاس بدین به این کد ابتدا یکم import بازی:import { ApolloClient, ApolloLink } from "@apollo/client"import { Observable } from "apollo-link"import { InMemoryCache } from "apollo-cache-inmemory"import { } from "@apollo/client/link/error"import { createUploadLink } from "apollo-upload-client"import { buildAxiosFetch } from "@lifeomic/axios-fetch"import { Config } from "App/Config"import axios from "axios"import AsyncStorage from "@react-native-community/async-storage"خب ابتدا باید Apollo Client , Apollo Link رو بیارم کلاینت رو برای ساختن یه instance از کلاینت دومی برای پاس دادن یه سری چیز دیگه پایین تر گفته میشه. Observable که تو هر ریکوئست یه Subscribe میکنه به ریکوئست تا زمانی که هندل بشه. inMemoryCache که وظیفه کش کردن رو برعهده میگیره و اگر جواب کوئری ها یکسان باشه دیگه ری رندرینگ اضافه نخواهید داشت ( از زیبایی های گراف و آپولو). رو داریم که شاید براتون جالب باشه ولی آپولو عین ارور رو بر نمیگردونه صرفا یک 400 میده و میره خونه باید با این بگیم برادر ارور های مارو برگردون بدونیم فازت چیه. UploadLink اختیاریه مال زمانیه که نیاز به اپلود عکس تو سرور داشته باشید. axios? وات د هل؟ آپلولو کلاینت بصورت پیشفرض از fetch استفاده میکنه موقع آپلود عکس بهتره با axios عوض بشه اینم الزامی نیست.const httpLink = createUploadLink({uri: SERVER_URL,credentials: "same-origin",fetch: buildAxiosFetch(axios, (config, input, init) => ({...config,onUploadProgress: init.onUploadProgress,})),});خب معمولا وقتی میخوایم لینک سرور رو بدیم آپلولو میومدیم createHttpLink رو استفاده میکردیم ولی ما میخوایم قابلیت آپلود عکسم داشته باشیم چون createUploadLink همه خاصیت های httpLink رو داره و dim sum (همون یه چی اضافه تر خودمون) fetch رو هم با axios و ساختن یه آرگومان از buildAxiosFetch میدیم اینطوری میتونیم درصد اپلود شدن رو هم با uploadProgress داشته باشیم.خب سوال پیش میاد پس توکن چی؟ اصلا بخوایم چیزی تو هدر با هر ریکوئست بنویسیم چیکار کنیم؟const request = async (operation) => {const token = await AsyncStorage.getItem("token");console.log(token);operation.setContext({headers: {authorization: token ? `Bearer ${token}` : "",},});};فکر کنم نیاز به توضیح نداشته باشه. کانتکست توی گراف تو هر resolver اجرا میشه اینطوری تو هر ریکوئست میتونین توکن رو پاس بدین و اینکه اگر دوست دارین خط لاگ کردن توکن رو بردارین.export const requestLink = new ApolloLink((operation, forward) =>new Observable((observer) => {let handle;Promise.resolve(operation).then((oper) => request(oper)).then(() => {handle = forward(operation).subscribe({next: observer.next.bind(observer),error: observer.error.bind(observer),complete: observer.complete.bind(observer),});}).catch(observer.error.bind(observer));return () => {if (handle) handle.unsubscribe();};}));اینجا همون داستان سابسکرایب کردن به ریکوئست ها و برگردوندن عملیات بعدی تا اینکه همه چی تموم بشه و ما آنسابسکرایب کنیم.const link = ApolloLink.from([(({ graphQLErrors, networkError }) => {if (graphQLErrors) {console.log("[graphQLErrors]", graphQLErrors);graphQLErrors.map(({ message, extensions }) => {console.log(`[GraphQL error]: Message: ${message}, code: ${extensions.code}`);if (extensions.code === "UNAUTHENTICATED") {AsyncStorage.clear();}});}if (networkError) {console.log(`[Network error]: ${networkError}`);}}),requestLink,httpLink,]);اینم برای هندل کردن ارور ها داریم میگیم لینک ریکوئست و Http مارو بگیر ریکوئست بزن اگر ارور ‌ Network داشت برش گردون اگر ارور دیگه ای داشت برش گردون با کد ارور و پیامش و در آخر اگر ارور از نوع UNAUTHENTICATED بود یعنی توکن احتمالا معتبر نیست استوریج رو پاک کن و ارور رو برگردون.const client = new ApolloClient({ link, cache });export { client };خب در نهایت لینک و کش که ساختیم رو پاس میدیم به یه Instance از کلاینت آپولو و export اش میکنیم برای استفاده در اپلیکیشن.خب قدم بعدی اینه که بیایم یه instance از اپ با آپولو بسازیم و اون رو رجیستر کنیم پس میریم داخل index.jsimport React from "react"import { AppRegistry } from "react-native"import RootApp from "./App/App"import { name as appName } from "./app.json"import { ApolloProvider } from "@apollo/react-hooks"import { client } from "./App/Api/ApolloConfig"const App = () => ( );AppRegistry.registerComponent(appName, () => App);حالا یه کوئری و یک mutation بنویسید و تست کنید امیدوارم که جواب بده ( فقط یه نکته مهم در ایمولاتر آندروید کلا جواب نمیده دیوایس واقعی رو تست کنید) ( کوئری ها همیشه اوکیه با mutation تست کنید درست بود یعنی اوکیه)

خوش به حالت مردی/پسری...

علیرضا توکل — Wed, 29 May 2019 17:43:22 +0430

همه ما یک ورژن از این جمله رو شنیدیم شایدم خیلی تندترشو: همه چی به نفع مردهاستخوش به حالت مردیمردا که مشکلی ندارن!(این موردعلاقه خودمه!)در نظر داشته باشین در جامعه جهانی کنونی بزرگترین چالش برای هر مردی اینه که برای خودش معنی کنه اصلا مرد بودن یعنی چی. از نگاه فمنیسم یک معنا داره مرد و از نگاه خودمون یک نگاه. از نگاه مردان نسل قدیم یک معنی داره و.... این بحران هویتی که اتفاق میفته باعث میشه هر چه بیشتر هر مردی از 13 تا اخر عمرش برای خودش معنی کنه دقیقا چه موجودیه. البته راهکار های مختلفی داره که بدونه(هنوز خودم عملیش نکردم والا) اما حداقل میدونم بدترینش پرسیدن از جنس مخالفه چون بزنم به کیبورد انقدر معیارا متفاوته و لحظه ای تغییر میکنه که دلار جلوش کم میاره!بهتره یکم به ما مردها با دید خودمون نگاه کنیم یه چندتا آمار میگم از بی بی سی پخش شد:1- 94% خودکشی های موفق متعلق به مردان است2- 1 از 4 مرد دوست صمیمی ندارد3- انجمن و گروهی جهت حمایت از آزار جسمی و روحی مردان وجود ندارد(جمع کنید این سوسول بازیارو نه)4- مخرب ترین اثر جسمی ناشی از آزار روحی را مردان تجربه میکنند5- 80% مردان که در دوران کودکی آزار جنسی دیده اند هیچوقت در مورد آن با کسی صحبت نمیکنند6- پرونده ها دروغین آزار جنسی در آمریکا توسط زنان باعث جنجال فراوانی شده که بدلیل جو فمنیستی صحبتی از ان در رسانه های آمریکا نمیشودتوصیه میکنم این ویدیو درباره مردان که Td Jakes صحبت میکنه رو تماشا کنید شخصا باهاش اشک ریختم عصبی شدم و در نهایت به آرامش رسیدم. https://www.youtube.com/watch?v=sQe0UQ3FAEY این ویدیو کوتاه هم میتونه تاثیرگزار باشهhttps://www.youtube.com/watch?v=VGWvT30foCc

همون مبتدیه ...

علیرضا توکل — Wed, 29 May 2019 15:06:41 +0430

مطالبی که در ویرگول نوشته میشه عمدتا توسط افراد با سابقه اس که دستی بر آتش در مسائل مختلف دارند ولی دوست داشتم به عنوان یک فرد تازه کار در زمینه وب، نکته ای را بگم که در ماه های گذشته در جاهایی که کارآموزی کردم نمود داشته.این مطلب یک مطلب صرفا ترولینگ نخواهد بود و راهکارهای خودم را ارائه میدم اما در ابتدا کمی غرغر با چاشنی حقیقت:1- شکی در این نیست که شما به عنوان مدیر در یک شرکت ( احتمالا خاک اون تخصص اتون را خوردید) میگم احتمالا چون مشخص هم نیست والا شایدم در جرگه مدیران احتمالا لایق قرار دارید. قرار نیست همیشه به یک تازه کار بفهمونید هیچی نمیدونه کما اینکه درخت پربار تر افتاده تر.2- لزوما هرکسی که سمت برنامه نویسی میاد بک گراند تحصیلی اش نرم افزار نیست. چه بسا بعضی افراد علاقه اشون را در سن بالاتر میابند و بهش میرسند پس از گفتن جملاتی همانند پس تو دانشگاه چی خوندی؟ یا خب همون [رشته] را ادامه میدادی پرهیز کنید.3-اگر نیروهای باسابقه تر مجموعه شما از مهارت های اجتماعی عاجزند و نمیتونند کاری کنند که فرد مبتدی در محیط کار حس تحقیر نداشته باشه بهتره به قول گری واینرچاک چندتاشونو اخراج کنید! ( یعنی چی؟ شما کارای مارو انجام میدی یا اون مبتدیه؟) اگر تفکر اینه تازه کار استخدام نکنید!4- توی آگهی شغلیتون کمی با انرژی تر و خلاقانه تر بنویسید. بیشتر از اینکه بپرسید چرا باید بهت شغل بدیم؟ بگید چه مزایایی داره برای شما کار کردن.5-از فرد مبتدی در دوران کارآموزیش بخواین ماهی یکبار ( یا هفته ای بسته به مدت کارآموزی) دغدغه ها و استرس هاش رو بیان کنه تا بتونید بهتر بهش کمک کنید و در نهایت ارزیابی درستی هم از وی داشته باشین.