<p>कॉलर को अपोलो-लिंक-त्रुटि वापसी त्रुटि</p>

मेरे पास मेरे ऐप में एक ही समस्या है। मैं त्रुटि लिंक में सभी त्रुटियों को पकड़ना चाहता हूं (उदाहरण के लिए ताकि मैं उन्हें लॉग कर सकूं) लेकिन मैं उन्हें मूल कॉलर को अग्रेषित करना चाहता हूं और उन्हें वहां पर संभालना चाहता हूं क्योंकि उनमें एक कस्टम त्रुटि संदेश हो सकता है जिसे उपयोगकर्ता को प्रदर्शित करने की आवश्यकता होती है .

मेरा कोड:

• प्रदाता में:

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
        console.log(`[GraphQL error]: ${message}, Location: ${locations}, Path: ${path}`);
      },
    );
  }
});

const client = new ApolloClient({
  link: authLink.concat(errorLink).concat(httpLink),
  cache: new InMemoryCache(),
});

• घटक में:

 loginMutation({ variables: { data } })
    .then(({ data, errors }) => {
      if (errors) {
        // I WANT TO BE ABLE TO READ ERROR MESSAGE HERE SO I CAN DISPLAY IT TO THE USER
      } else if (data) {
        ....
      }
    });

ध्यान दें कि forward को कॉल करने से मदद नहीं मिलेगी क्योंकि यह then तर्क के रूप में अपरिभाषित लौटाता है, इसलिए मेरे पास न तो डेटा होगा और न ही त्रुटि और errors से null भी n विकल्प नहीं है क्योंकि मुझे वास्तव में त्रुटियों को पढ़ने की आवश्यकता है।

@lbrdar क्या आपको इसके लिए कोई समाधान मिला है?

नहीं

@lbrdar ऐसा करने का तरीका पकड़ के साथ नहीं है?

 loginMutation({ variables: { data } })
    .then(({ data, errors }) => {
      if (errors) {
        // I WANT TO BE ABLE TO READ ERROR MESSAGE HERE SO I CAN DISPLAY IT TO THE USER
      } else if (data) {
        ....
      }
    }).catch(errors => {

    });

@lbrdar @romucci मैं उसी मुद्दे का सामना कर रहा हूं। क्या आप लोगों ने इसे हल किया?

@Nosherwan मैंने अभी संस्करण 1.1.11 स्थापित किया है और अब सब कुछ ठीक काम करता है ... आप अपने आंतरिक वादों की भी जांच कर सकते हैं (हो सकता है कि कहीं आप अन्य वादे के अंदर एक वादा वापस करना भूल गए हों)

@merksam टिप्पणी के लिए धन्यवाद।
मैं आपके जैसा ही संस्करण का उपयोग कर रहा हूं। दुर्भाग्य से व्यवहार वही है।

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
        console.log(`[GraphQL error]: ${message}, Location: ${locations}, Path: ${path}`);
      },
    );
  }
});

उपरोक्त कोड ब्लॉक में, graphQLErrors पकड़े गए हैं और ऑनरर हैंडलर में कुछ किया जा सकता है। हालांकि उन त्रुटियों को वास्तविक कॉलिंग वादे को पारित नहीं किया जाता है।
मैं async फ़ंक्शंस का उपयोग कर रहा हूं, इसलिए 'फिर' के बजाय मैं प्रतीक्षित कीवर्ड का उपयोग कर रहा हूं, और यह एक कोशिश कैच ब्लॉक के अंदर है।
कैच ब्लॉक त्रुटि को पकड़ता है, लेकिन इसमें कोई त्रुटि नहीं है।

क्या किसी ने इसके लिए कोई उपाय खोजा है?

@ नोशेरवान @ प्रेम-प्रकाश क्या हम चैट में कहीं संपर्क कर सकते हैं या कॉल भी कर सकते हैं, इसलिए हम यह पता लगाने की कोशिश करते हैं कि यह मेरे मामले में क्यों काम कर रहा है और आपके मामले में नहीं? (यदि यह अभी भी प्रासंगिक है)

मुझे समाधान मिला, अजीब तरह का, लेकिन यह है:

यह सिर्फ संदेश प्रिंट करता है

  updateProfile: function() {
      this.$apollo
        .mutate({
          mutation: UPDATE_PROFILE,
          variables: current_user
        })
        .catch((error) => {
          console.log("this prints just the message", error);
        });
    }

लेकिन यह त्रुटियों की पूरी सामग्री को प्रिंट करता है

  updateProfile: function() {
      this.$apollo
        .mutate({
          mutation: UPDATE_PROFILE,
          variables: current_user
        })
        .catch(({ graphQLErrors }) => {
          console.log("this prints the full content of 'errors'", graphQLErrors);
        });
    }

मुझे लगता है कि इस मुद्दे को बंद किया जा सकता है
@Nosherwan @romucci @Seat @lbrdar

इसे दस्तावेज़ीकरण में जोड़ने के बारे में क्या?

क्षमा करें, लेकिन उपरोक्त समाधान काम नहीं करता है। मुझे लगता है कि लिंक-त्रुटि में ग्राफ़िकल एरर्स को प्रारंभिक कॉलर पर वापस कैसे भेजना है, इस पर एक पूर्ण उदाहरण है।

मेरे मामले में, जब कोई त्रुटि होती है, तो निम्न ApolloQueryResult ऑब्जेक्ट को त्रुटि विवरण ऑनरर में कंसोल नहीं मिलता है। कुछ कोशिश में ... कॉल के आसपास पकड़। सर्वर से graphqlError विवरण प्राप्त नहीं कर सकता। बस एक "400 त्रुटि" ..

const gqlResult: ApolloQueryResult<IGReturnData<
            IAllDataTypes
        >> = await apolloClient.query<IGReturnData<IAllDataTypes>, TVariables>({
            query: queryGql,
            variables: queryVariables,
            errorPolicy: "all",
        });

सर्वर विन्यास:

const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
        graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
            ),
        );

    if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httplink = new HttpLink({
    uri: "/graphql",
    credentials: "include",
});

const links = [errorLink, httplink];

export const apolloClient = new ApolloClient({
    link: ApolloLink.from(links),
    cache: new InMemoryCache({ addTypename: false, fragmentMatcher }),
});

@ प्रेम-प्रकाश धन्यवाद .... तारणहार ..

यह समस्या अत्यंत स्थायी है। मेरे प्रोजेक्ट पर केवल क्लाइंट पर ग्राफ़िकल सर्वर पर मेरा कोई नियंत्रण नहीं है। सर्वर सही आकार में ग्राफ़िकल त्रुटियों के साथ प्रतिक्रिया दे रहा है, लेकिन 400 स्थिति कोड के साथ। त्रुटि-लिंक में मेरे पास graphQLErrors तक पहुंच है, लेकिन घटक उत्परिवर्तन में, जब मैं @ प्रेम-प्रकाश द्वारा सुझाए गए graphQLErrors को बाहर निकालता हूं, तो graphQLErrors एक खाली सरणी है . मैं केवल एक डिफ़ॉल्ट संदेश "त्रुटि: नेटवर्क त्रुटि: प्रतिक्रिया सफल नहीं: प्राप्त स्थिति कोड 400" तक पहुंच सकता हूं। अपोलो सर्वर से मानव-पठनीय त्रुटि संदेश ("उपयोगकर्ता या पासवर्ड गलत") को रोक रहा है क्योंकि 400 स्थिति कोड अपोलो के लिए एक पूर्ण-स्टॉप है।

क्या वहां कोई है जो त्रुटि संदेश के साथ 400 स्थिति कोड प्रतिक्रिया को सफलतापूर्वक संभाल सकता है, और उस संदेश को यूआई को उस घटक पर पास कर सकता है जिसे उत्परिवर्तन कहा जाता है?

ठीक है, मेरे पास एक बहुत ही अनुचित दृष्टिकोण है, लेकिन यह काम कर रहा है:

मैं कैश में एक बूलियन hasGraphError सेट कर रहा हूं, और त्रुटि संदेश को कैशिंग भी कर रहा हूं।

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(error => {
      // log gql error(s)
      console.log("[GraphQL error]: ", error);
      // cache error
      client.writeData({
        data: {
          hasGraphError: true,
          currentGraphError: error.message
        }
      });
    });
  }
  if (networkError) {
    // log network errors
    console.log("[Network error]: ", networkError);
  }
});

फिर एक MutationError घटक में, मैं त्रुटि और त्रुटि संदेश की उपस्थिति के लिए कैश को क्वेरी करता हूं, सशर्त रूप से gql त्रुटि या वास्तविक नेटवर्क त्रुटि प्रस्तुत करता हूं:

const HAS_ERROR = gql`
  query IsGraphErrorPresent {
    hasGraphError <strong i="11">@client</strong>
    currentGraphError <strong i="12">@client</strong>
  }
`;
export default function MutationError({ error }) {
  const { data } = useQuery(HAS_ERROR);
  const defaultErrorMessage =
    "We're having trouble connecting. Please check your internet connection and try again.";

  // real network error
  if (error && error.message.includes("Failed to fetch")) {
    return <Error>{defaultErrorMessage}</Error>;
  }

  // graph error
  if (error && data && data.hasGraphError) {
    return <Error>{data.currentGraphError}</Error>;
  }

  // probably a real server/network error
  if (error) {
    return <Error>{defaultErrorMessage}</Error>;
  }

  return null;
}

यह वैश्विक होगा क्योंकि मुझे सभी उत्परिवर्तनों पर इसकी आवश्यकता है क्योंकि मेरा सर्वर _always_ 400 लौटा रहा है जो 200 + ग्राफ़िकल त्रुटियों के लिए होना चाहिए (मैं इसके बारे में थोड़ा नमकीन हूं) ...

तो यहां महत्वपूर्ण बात यह है कि प्रत्येक घटक उत्परिवर्तन पर, मैं एक खाली ऑनर कॉलबैक का उपयोग करता हूं जो अपोलो से एक अनचाहे अपवाद को रोकता है, और सफलता पर मुझे कैश में हैग्राफ एरर बूलियन को रीसेट करना याद रखना चाहिए:

  const [someMutation, { loading, error, client }] = useMutation(SOME_MUTATION, {
    onError() {
      // this callback prevents apollo from throwing
      // ...unhandled exception on 400 status code
    },
    onCompleted({ someMutation }) {
      client.writeData({
        data: {
          hasGraphError: false
        }
      });
    }
  });

फिर उत्परिवर्तन त्रुटि घटक useMutation त्रुटि को सहारा के रूप में लेता है (जो दोनों वास्तविक नेटवर्क त्रुटियों को निर्धारित करने की अनुमति देता है, और यह सुनिश्चित करता है कि हम गलत घटक पर वैश्विक कैश्ड gql त्रुटि प्रदान नहीं कर रहे हैं):

  {loading && <Spinner />}
  {error && <MutationError error={error} />}

जैसा कि मैंने कहा, यह दृष्टिकोण बहुत अनुचित है, हालांकि यह वर्तमान में हल करने के लिए काम कर रहा है:

1. आम तौर पर यूआई में ग्राफ़िकल त्रुटियों को संभालने में सक्षम हो, भले ही प्रतिक्रिया में गैर -200 स्थिति कोड हो
2. विशेष रूप से UI में प्रतिपादन के लिए अपोलो-लिंक-त्रुटि कॉन्फ़िगरेशन से कॉलिंग घटक में त्रुटियों को पारित करने में सक्षम हो

कोड के रूप में इस दृष्टिकोण के साथ समस्याएं: यह सरणी में कैश में अंतिम GQL त्रुटि लिखता है, इसलिए यह एक ही समय में एकाधिक GQL त्रुटियों का समर्थन नहीं कर रहा है। हालांकि, इसे प्रबंधित करना काफी आसान होना चाहिए, त्रुटियों की एक सरणी बनाकर, और इसे कैश में संग्रहीत करके, लेकिन आपको ऐसा करने के लिए स्थानीय स्कीमा/रिज़ॉल्वर को परिभाषित करना होगा, या संभावित रूप से केवल JSON.stringify इसे स्टोर करने के लिए एक स्ट्रिंग के रूप में कैश करें। बूलियन को गलत पर सेट करने के बजाय, आपको सफलता पर कैश में currentGraphError को भी साफ़ करना होगा।

आशा है कि यह किसी की मदद करता है!

साथ ही, अगर यह मदद करता है, तो ध्यान दें कि त्रुटि नीति वर्तमान में उपयोग उत्परिवर्तन हुक पर काम नहीं करती है, यह एक बग है, और हाल ही में इस पीआर में संबोधित किया गया था: https://github.com/apollographql/apollo-client/pull/5863 , लेकिन इस समय रिलीज करने के लिए इसे नहीं बनाया है।

डेवलपर्स से इस पर कोई प्रगति?