প্রতিক্রিয়া-অ্যাপোলো ব্যবহারের সাথে মিটিং হুকের সাথে ত্রুটিগুলি পরিচালনা করা

Question

আমি এই সমস্যাটি ঘিরে আমার মাথা নেওয়ার চেষ্টা করছি কিন্তু এর জোরালো উত্তর পাই না। আমি ইউজমুটেশন হুক ব্যবহার করে একটি লগইন মিউটেশন সম্পাদন করার চেষ্টা করছি।

TLDR; আমি জানতে চাই যে অপশন এবং পাসওয়ার্ড দ্বারা আমাকে প্রদত্ত ত্রুটিটিতে পাস করা অনারারের মধ্যে ঠিক কী পার্থক্য রয়েছে

আমার কোড স্নিপেট এখানে

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

সার্ভার-সাইডে, আমার লগইন করার জন্য প্রিসেট / হার্ডকোডযুক্ত ইমেল রয়েছে এবং আমি অ্যাপোলো বা অন্য কোনও ক্লায়েন্ট ব্যবহার করছি না। এই লগইন মিউটেশনটির সমাধানের ক্ষেত্রে, ইমেলটি যদি একইভাবে ব্যবহার না করা হয় তবে আমি কেবল একটি ত্রুটি নিক্ষেপ করি

throw new Error('Invalid Email');

এখন আমি এই ত্রুটিটি ক্লায়েন্ট-সাইডে (প্রতিক্রিয়া) হ্যান্ডেল করতে চাই। তবে আমার উদ্বেগটি হ'ল আমি যদি ব্যবহারের পরিবর্তন হুক থেকে ফিরে 'ত্রুটি' ব্যবহার করি এবং ত্রুটিটি এভাবে দেখানোর চেষ্টা করি

render() {
...
{error && <div> Error occured </div>}
...
}

ত্রুটিটি ইউআইতে আপডেট করা হয়েছে তবে তত্ক্ষণাত্ প্রতিক্রিয়া আমাকে আনহানডেলড প্রত্যাখ্যান (ত্রুটি) সহ একটি স্ক্রিন দেখায়: গ্রাফকিএল ত্রুটি: আমার কাস্টম-ত্রুটি-বার্তা

তবে, যদি আমি মিউটেট ফাংশনটি ব্যবহারের অপশনগুলিতে অনার পাস করে ব্যবহার করি তবে এটি আমাকে এই স্ক্রিনটি দেখায় না এবং আমি ত্রুটি দিয়ে যা চাই তা করতে পারি।

আমি জানতে চাই যে ইউজারমুয়েশন দ্বারা প্রদত্ত বিকল্পগুলিতে এবং ত্রুটিটি পাস করার মধ্যে ওনারররের মধ্যে ঠিক কী পার্থক্য রয়েছে এবং অনারর ব্যবহার না করা হলে কেন প্রতিক্রিয়া আমাকে সেই ত্রুটি স্ক্রিনটি দেখায় ।

ধন্যবাদ!

Answer 1

: অ্যাপোলো তার API এর মাধ্যমে প্রয়োগ ত্রুটি দুই ধরণের অনাবৃত GraphQL ত্রুটি , যা প্রতিক্রিয়া অংশ হিসেবে ফিরিয়ে আনা হয় errors, পাশাপাশি data, এবং নেটওয়ার্ক ত্রুটি যা ঘটে যখন একটি অনুরোধ ব্যর্থ। যখন কোনও সার্ভারে পৌঁছানো যায় না বা প্রতিক্রিয়া স্থিতি 200 ছাড়া অন্য কিছু হয় তবে একটি নেটওয়ার্ক ত্রুটি ঘটবে - errorsপ্রতিক্রিয়াতে থাকা প্রশ্নের এখনও 200 এর স্থিতি থাকতে পারে But তবে একটি অবৈধ ক্যোয়ারী, উদাহরণস্বরূপ, অ্যাপোলো ক্লায়েন্টে একটি 400 স্থিতি এবং একটি নেটওয়ার্ক ত্রুটি।

অ্যাপোলো ক্লায়েন্ট আসলে মিউটেশন ত্রুটিগুলি পরিচালনা করার জন্য চারটি ভিন্ন উপায় সরবরাহ করে:

১) mutateহুক দ্বারা ফিরিয়ে ফাংশনটিতে কল করা একটি প্রতিশ্রুতি দেয়। যদি অনুরোধটি সফল হয় তবে প্রতিশ্রুতি এমন কোনও প্রতিক্রিয়ার অবজেক্টের সমাধান করবে dataযা সার্ভার দ্বারা ফিরে আসা অন্তর্ভুক্ত । অনুরোধ ব্যর্থ হলে, প্রতিশ্রুতি ত্রুটি সহ প্রত্যাখ্যান করবে । এজন্য আপনি কনসোলে একটি "হাতছাড়া হওয়া প্রত্যাখ্যান" বার্তাটি দেখেন - আপনাকে প্রত্যাখ্যাত প্রতিশ্রুতি পরিচালনা করতে হবে।

login()
  .then(({ data }) => {
    // you can do something with the response here
  })
  .catch(e => {
    // you can do something with the error here
  })

বা অ্যাসিঙ্ক / প্রতীক সিনট্যাক্স সহ:

try {
  const { data } = await login()
} catch (e) {
  // do something with the error here
}

ডিফল্টরূপে, প্রতিশ্রুতি উপর প্রত্যাখ্যান করবে পারেন GraphQL ত্রুটি বা নেটওয়ার্ক ত্রুটি। সেটিং দ্বারা errorPolicy করতে ignoreবা allযদিও, প্রতিশ্রুতি হবে শুধুমাত্র নেটওয়ার্ক ত্রুটি উপর প্রত্যাখ্যান। এই ক্ষেত্রে, গ্রাফকিউএল ত্রুটিগুলি প্রতিক্রিয়া অবজেক্টের মাধ্যমে এখনও অ্যাক্সেসযোগ্য হবে, তবে প্রতিশ্রুতিটি সমাধান করবে।

২) উপরের একমাত্র ব্যতিক্রম ঘটে যখন আপনি কোনও onErrorফাংশন সরবরাহ করেন। এই ক্ষেত্রে, প্রতিশ্রুতি সর্বদা প্রত্যাখ্যান করার পরিবর্তে সমাধান হবে, তবে যদি কোনও ত্রুটি দেখা দেয় onErrorতবে ফলাফলযুক্ত ত্রুটি সহ কল ​​করা হবে। errorPolicyআপনার সেট করা এখানেও প্রযোজ্য - onErrorসবসময় নেটওয়ার্ক ত্রুটি জন্য ডাকা হবে কিন্তু যখন ডিফল্ট ব্যবহার করে শুধুমাত্র GraphQL ত্রুটিযুক্ত বলা হবে errorPolicyএর none। ব্যবহার onErrorকরা প্রত্যাখ্যাত প্রতিশ্রুতি ধরার সমতুল্য - এটি কেবল ত্রুটি হ্যান্ডলারটিকে mutateফাংশনের কল সাইট থেকে হুকের কল সাইটে সরিয়ে দেয়।

৩) mutateফাংশনটি ছাড়াও , useMutationহুক একটি ফলাফলের বস্তুও প্রদান করে। এই অবজেক্টটি মিউটেশন চলাকালীন যে কোনও ত্রুটির মুখোমুখি হয় exp আমরা উপরে যে ত্রুটি হ্যান্ডলার ফাংশনগুলি লিখেছি তার বিপরীতে, এই errorবস্তুটি প্রয়োগের স্থিতি উপস্থাপন করে । এইভাবে উন্মুক্ত বস্তু errorএবং dataবস্তু উভয়ই সুবিধার্থে বিদ্যমান। তারা এটি করার সমতুল্য :

const [mutate] = useMutation(YOUR_MUTATION)
const [data, setData] = useState()
const [error, setError] = useState()
const handleClick = async () => {
  try {
    const { data } = await mutate()
    setData(data)
  catch (e) {
    setError(e)
  }
}

আপনি যখন আপনার ইউআই-তে কোনও ত্রুটি আছে তার সত্য প্রতিফলিত করতে চান এমন ক্ষেত্রে ত্রুটির অবস্থা থাকা কার্যকর হতে পারে। উদাহরণস্বরূপ, কোনও ত্রুটি ছাড়াই মিউটেশনটি চালানো না হওয়া পর্যন্ত আপনি কোনও উপাদানটির রঙ পরিবর্তন করতে পারেন। উপরের বয়লারপ্লেটটি নিজে লেখার পরিবর্তে আপনি কেবলমাত্র সরবরাহিত ফলাফল অবজেক্টটি ব্যবহার করতে পারেন।

const [mutate, { data, error }] = useMutation(YOUR_MUTATION)

দ্রষ্টব্য: আপনি যখন আপনার UI আপডেট করতে এক্সপোজড ত্রুটি পরিস্থিতিটি ব্যবহার করতে পারেন, তবুও এটি করা ত্রুটিটি সামাল দেওয়ার বিকল্প নয় । আপনি আবশ্যক হয় একটি প্রদান কলব্যাক বা অর্ডারে একটি অপরিচালিত প্রতিশ্রুতি প্রত্যাখ্যান সম্পর্কে সতর্কবার্তা এড়ানোর জন্য ত্রুটি।onErrorcatch

4.) সর্বশেষে, এছাড়াও আপনি ব্যবহার করতে পারেন অ্যাপোলো-লিঙ্ক-ত্রুটি যোগ করার জন্য বিশ্বব্যাপী আপনার অনুরোধের জন্য ত্রুটি পরিচালনা। এটি আপনাকে উদাহরণস্বরূপ, আপনার অ্যাপ্লিকেশনটিতে কোথায় অনুরোধের সূচনা হয়েছে তা বিবেচনা না করে একটি ত্রুটি ডায়লগ প্রদর্শন করতে দেয়।

আপনি নিজের প্রয়োগে এই পদ্ধতিগুলির মধ্যে কোনটি ব্যবহার করছেন তা নির্ভর করে (গ্লোবাল বনাম স্থানীয়, রাজ্য বনাম কলব্যাক ইত্যাদি)। বেশিরভাগ অ্যাপ্লিকেশন ত্রুটি পরিচালনা করার একাধিক পদ্ধতির ব্যবহার করবে।

Comments

ব্যাখ্যার জন্য ধন্যবাদ ! উর্ধ্বে!

— হাইফেন ওহম্যান