Apollo-link-rest: कैसे उपयोग करने के लिए response.headers साथ अपोलो-लिंक-आराम

@blatoo - दुर्भाग्य से, यह एक ऐसी सुविधा है जो वर्तमान में अपोलो-लिंक-रेस्ट में मौजूद नहीं है।

मूल रूप से, ग्राफक्यूएल हेडर से निपटने की उम्मीद नहीं करता है - क्योंकि उन्हें ग्राफ में गहराई से वापस करना होगा।

अगर कोई इसे लागू करना चाहता है, तो मैं हमें प्रतिक्रिया के "बॉडी" में एक गुप्त/स्वचालित फ़ील्ड के रूप में __headers जोड़ सकता हूं, लेकिन हमें इस व्यवहार को सक्षम करने के लिए एक फीचर-फ्लैग जोड़ना होगा, और शीर्षलेख कुंजियों में कुछ प्रबंधन करें ताकि वे ग्राफ़िकल संगत हों।

const queryTodos = gql`
      query Todos($page: number, $limit: number) {
        todos(_page: $page, _limit: $limit)
          @rest(type: "[Todo]", path: "/todos/?{args}") {
+             __headers {
+                         XMyHeader
+             }
            userId
            id
            title
            completed
        }
     }
   `;

@fbartho इस उत्तर के लिए बहुत बहुत धन्यवाद। अगर हम हेडर की जानकारी तक पहुंच सकते हैं तो यह एक बड़ी सुविधा होगी। मैं जेसन-सर्वर का उपयोग करता हूं, वे Headers में पेजिनेशन सूचनाओं को कर्सर आधारित पेजिनेशन इन्फोस के लिए भी डालते हैं।

वैसे, मैंने आपके दस्तावेज़ में देखा है: responseTansformer और customFetch विकल्प। क्या मैं पेजिनेशन जानकारी प्राप्त करने के लिए उनके साथ कुछ कर सकता हूँ ??? असल में मैंने बहुत कोशिश की, लेकिन फिर भी कोई सफलता नहीं मिली...:

https://www.apollographql.com/docs/link/links/rest/#response -transforming

https://www.apollographql.com/docs/link/links/rest/#custom -fetch

दुर्भाग्य से, apollo-link-rest ग्राफक्यूएल में प्लग इन करने के लिए apollo-link के एपीआई पर निर्भर करता है - लेकिन इसका मतलब है कि मुझे नहीं लगता कि जेएस Headers एपीआई को सीधे साझा करने का कोई स्पष्ट तरीका है - लेकिन इसका एक असामान्य संस्करण संभव हो सकता है।

उस ने कहा, responseTransformer या customFetch विकल्पों का उपयोग आपको जो चाहिए उसे पैच करने के लिए किया जा सकता है।

responseTransformer को JS Response ऑब्जेक्ट प्राप्त होता है जिसमें response.headers विशेषता होती है।

तो आप कुछ इस तरह लिख सकते हैं:

responseTransformer: async (resp: Response) => {
    const body = await resp.json();
    const interestingHeaders = {};
    interestingHeaders.headerOne = resp.headers.get("headerOne"); // Pluck out the headers you want
    body.__headers = interestingHeaders
    return body;
}

आपके ब्राउज़र संस्करण के आधार पर आप का उपयोग करने में सक्षम हो सकता है headers.entries() के बजाय एक वस्तु के रूप में हेडर के सभी प्राप्त करने के लिए headers.get() - लेकिन यह है कि सफारी-आईओएस में अभी उपलब्ध नहीं है।

यह स्पष्ट रूप से सरलीकृत है, और त्रुटि प्रबंधन आप पर छोड़ दिया गया है, लेकिन मुझे लगता है कि यह काम करेगा!

customFetch भी यह कर सकता है, लेकिन मुझे लगता है कि responseTransformer आसान है।

@fbartho वाह, यह अच्छा है! मैंने अभी आपके कोड की कोशिश की, यह काम करता है और मुझे लिंक मिल गया है।

अब यह एक और समस्या आती है, मैं क्वेरी में body.__headers.link कैसे एक्सेस कर सकता हूं?

मेरा क्वेरी कोड है:

const queryTodos = gql`
  query Todos($page: number, $limit: number) {
    todos(_page: $page, _limit: $limit)
      @rest(type: "TodoPagination", path: "/todos/?{args}") {
      __headers {
        link
      }
      userId
      id
      title
      completed
    }
  }
`;

लेकिन __headers का मूल्य क्या शून्य है ...
कोड यहां है: मैंने आपका कोड Client.ts में जोड़ा है और क्वेरी कोड Todo.tsx :
https://codesandbox.io/s/how-to-access-response-0mqx7?file=/src/Todos.tsx

@fbartho हाय, मैंने तीन अलग-अलग तरीकों की कोशिश की, आखिर में, मैंने आखिरकार इस समस्या को हल किया। हालांकि, मुझे अभी भी संदेह है कि क्या यह एक अच्छा समाधान है। क्या आप मुझे अपनी राय दे सकते हैं?

विधि 1: विफल।
सबसे पहले, मुझे लगता है, मैं __headers में useQuery() क्वेरी कर सकता हूं, कई बार कोशिश की, लेकिन असफल रहा।

विधि 2: कोशिश नहीं की, क्योंकि मुझे समाधान पर संदेह है
responseTransformer में प्रतिक्रिया की संरचना बदलें, __headers को __headers कुंजी में रखें और टूडू सूची को todo कुंजी में भी रखें। हालांकि, मुझे लगता है, यह एक अच्छा समाधान नहीं है। क्योंकि, प्रतिक्रिया की सभी संरचना बदल दी जाएगी। तो मुझे useQuery() में सभी संरचना को फिर से लिखना होगा।

विधि 3: सफलता और मृत सरल
मैंने __headers को एक प्रतिक्रियाशील चर में रखा है। responseTransformer फ़ंक्शन में, मैंने केवल __headers का मान एक प्रतिक्रियाशील चर में रखा है, और useQuery() निष्पादित होने के बाद इसे क्वेरी करता हूं। हालांकि, मुझे अभी भी यकीन नहीं है, क्योंकि, मुझे अलग-अलग क्वेरी के लिए एक अलग प्रतिक्रियाशील चर बनाना है ...

@blatoo , यह एक पुराना मुद्दा है, जिसे मैंने अभी देखा है, इसे new ApolloLink साथ हल किया है

const paginationLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((response) => {
    const context = operation.getContext();

    const { headers } = context.restResponses[0] || null;
    // in my case i'm making a bunch of sub queries, so i'm using `[0]` to get the headers from the top level.

    if (headers) {
      const pagination = getPaginationFromHeaders(headers.get('link'));

      return { ...response, data: { ...response.data, pagination } };
    }
    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: concat(paginationLink, restLink),
});