Next.js: न्यूनतम अपोलो उदाहरण

को निर्मित 13 दिस॰ 2016 · 60टिप्पणियाँ · स्रोत: vercel/next.js

यह पता चला है कि प्रतिक्रिया-अपोलो के बजाय सीधे अपोलो-क्लाइंट का उपयोग करते समय अपोलो एकीकरण बहुत आसान होता है।

यहाँ कोड है: https://github.com/nmaro/apolo-next-example
और यहाँ एक चालू संस्करण है (कम से कम जब तक मैं ग्राफ़िकल सर्वर को ऑनलाइन रखता हूँ): https://apollo-next-example-oslkzaynhp.now.sh

प्रासंगिक विवरण यहाँ हैं:

अपोलो.जेएस

import ApolloClient, {createNetworkInterface} from 'apollo-client'

export default new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: GRAPHQL_URL
  })
})

फिर एक पेज में

import React from 'react'
import gql from 'graphql-tag'
import 'isomorphic-fetch'
import apollo from '../apollo'
import Link from 'next/link'

const query = gql`query {
  posts {
    _id
    title
  }
}`
export default class extends React.Component {
  static async getInitialProps({req}) {
    return await apollo.query({
      query,
    })
  }
  render() {
    ...
  }
}

स्रोत

nickredmark

👍17 🎉2

सबसे उपयोगी टिप्पणी

हमें Apollo ब्लॉग पर Apollo + Next.js के बारे में एक ब्लॉग पोस्ट मिलनी चाहिए!

stubailo 3 फ़र॰ 2017

👍10

सभी 60 टिप्पणियाँ

कुछ अवलोकन: यह दृष्टिकोण सभी ग्राफ़िकल प्रश्नों को लोड करने के लिए घटकों में गहराई तक नहीं जाता है (कुछ ऐसा जो आप सर्वर-साइड को प्रतिक्रिया-अपोलो के साथ सक्षम कर सकते हैं)।

मेरा मानना है कि यह next.js के साथ थोड़ा समस्याग्रस्त है: आप वास्तव में घटक पदानुक्रम में डेटा को गहराई से लोड करने के लिए नहीं हैं - यदि आप चाहते हैं कि यह क्लाइंट और सर्वर-साइड दोनों पर हो। डेटा लोड करने के लिए केवल एक बिंदु है: रूट घटक में getInitialProps में। मुझे नहीं पता कि यह भविष्य में बदलने वाला है, लेकिन यदि नहीं, तो हमें करना होगा

हमारे ऐप्स को आर्किटेक्चर करें ताकि हम शुरू से ही एक पेज के लिए सभी प्रासंगिक डेटा लोड कर सकें, या
केवल क्लाइंट पर डेटा का एक हिस्सा (अर्थात् वह सब कुछ जो हम getInitialProps में लोड नहीं करते हैं), एक अलग रणनीति के साथ

दोनों ही मामलों में, getInitialProps में लोड किए जा रहे डेटा के लिए उपरोक्त दृष्टिकोण ठीक होना चाहिए।

nickredmark 13 दिस॰ 2016

और अगर कुछ कोर डेवलपर इसे पसंद करते हैं, तो मैं उदाहरण के साथ पुल अनुरोध बना सकता हूं।

nickredmark 13 दिस॰ 2016

getInitialProps के बारे में केवल रूट पर कॉल किया जाता है, https://github.com/zeit/next.js/issues/192 देखें। अपने विचारों को वहां रखना पसंद करेंगे।

sedubois 13 दिस॰ 2016

👍1

@sedubois आप react-apollo के साथ किन समस्याओं का सामना कर रहे थे?

amccloud 14 दिस॰ 2016

👍1

@nmaro आपका https://github.com/nmaro/apolo-next-example खाली है।

@amccloud इसके बारे में @nmaro से पूछना बेहतर है (मुझे अभी भी कोड में वापस आने की आवश्यकता है)।

sedubois 14 दिस॰ 2016

धन्यवाद @sedubois यह अब ऑनलाइन है (पहली बार केवल push के बजाय हमेशा push origin master चलाना भूल जाएं)।

nickredmark 14 दिस॰ 2016

ओह, मैंने गलत व्यक्ति का उल्लेख किया है। @nmaro प्रतिक्रिया-अपोलो के साथ आपको क्या समस्या थी?

amccloud 14 दिस॰ 2016

सर्वर में डेटा लोड किया गया था, फिर जैसे ही क्लाइंट ने लोड करना शुरू किया, पेज फिर से खाली हो गया। मैंने तब @sedubois के कार्यान्वयन (https://github.com/RelateMind/relate) को देखा, और सोचा कि यह त्वरित सबूत-अवधारणा के लिए पहले से ही काफी जटिल है, इसलिए मैंने अंत में निचले स्तर के एपीआई के साथ प्रयास किया।

nickredmark 14 दिस॰ 2016

@stubailo चूंकि आप सोच रहे थे कि अपोलो को next.js के साथ एकीकृत करना इतना कठिन क्यों है - ऐसा लगता है कि आप क्लाइंट और सर्वर दोनों पर डेटा प्राप्त कर सकते हैं, यह पेज के रूट घटक पर एक async फ़ंक्शन के अंदर है जिसे getInitialProps कहा जाता है। मुझे लगता है कि प्रतिक्रिया-अपोलो को एकीकृत करने का सामान्य तरीका केवल ग्राहक पक्ष पर उपयोगी होगा।

nickredmark 14 दिस॰ 2016

दिलचस्प - क्या Next.js के साथ कोई अन्य डेटा एकीकरण है? ऐसा लगता है कि मेरे द्वारा देखे गए उदाहरणों के आधार पर Redux का उपयोग करना भी बहुत कठिन है।

अधिकांश आधुनिक डेटा सिस्टम में किसी प्रकार का वैश्विक कैश (Redux, Apollo, Relay) होता है, इसलिए मुझे ऐसा लगता है कि इसे सक्षम करने के लिए Next में किसी प्रकार की सुविधा की आवश्यकता है।

stubailo 14 दिस॰ 2016

👍2

हम ग्लोबल कैश (Redux, Apollo, Relay) के साथ आधुनिक डेटा सिस्टम के साथ नेक्स्ट.js को कैसे बेहतर बना सकते हैं? मुझे लगता है कि अगली रिलीज के लिए यह एक बड़ी प्राथमिकता होनी चाहिए। @stubailo @rauchg

adamsoffer 15 दिस॰ 2016

बिल्कुल। हमारे पास विकी पर एक Redux उदाहरण है, हमें उन जैसे और अधिक बनाने की आवश्यकता है :)

rauchg 15 दिस॰ 2016

ऐसा कुछ नहीं है जो हमें रिलीज के आधार पर बीटीडब्ल्यू करना है। हम किसी भी समय विकि ट्यूटोरियल लिख सकते हैं।

rauchg 15 दिस॰ 2016

👍1

बीटीडब्ल्यू @nmaro वह उदाहरण वास्तव में साफ दिखता है, योगदान के लिए धन्यवाद। हम इसे एक आधार के रूप में ले सकते हैं और इसका विस्तार कर सकते हैं

rauchg 15 दिस॰ 2016

ओह, अजीब - मुझे इसमें शामिल मुद्दों का एहसास नहीं हुआ। @nmaro प्रतिक्रिया-अपोलो के बारे में क्या है जो चीजों को कठिन बनाता है? ऐसा लगता है कि आपको लगभग रेडक्स उदाहरण का पालन करने में सक्षम होना चाहिए, लेकिन new ApolloClient करें जहां यह createStore का उपयोग करता है, और ApolloProvider के बजाय Provider का उपयोग करें।

मुझे एक न्यूनतम उदाहरण बनाने के लिए किसी के साथ काम करना अच्छा लगेगा। रिएक्ट के लिए यह हमारा "हैलो वर्ल्ड" उदाहरण है, Next.js के लिए एक पोर्ट होना बहुत अच्छा होगा: https://github.com/apolostack/frontpage-react-app

stubailo 15 दिस॰ 2016

@stubailo मुझे आपके साथ न्यूनतम उदाहरण पर काम करना अच्छा लगेगा। मैं कुछ परियोजनाओं के लिए सार्वभौमिक अपोलो माइक्रोफ्रेमवर्क, शनि का उपयोग कर रहा हूं और अंततः उन्हें नेक्स्ट.जेएस + अपोलो पर पोर्ट करना पसंद करूंगा :)

adamsoffer 15 दिस॰ 2016

अच्छा - हाँ, क्रिएट-रिएक्शन-ऐप के बजाय इसे अगले.जेएस पर चलाने के लिए फ्रंटपेज ऐप में न्यूनतम संशोधन करना मेरी प्राथमिकता होगी। तो हम इसे अपने होम पेज पर भी सूचीबद्ध कर सकते हैं!

stubailo 15 दिस॰ 2016

👍1

@stubailo

एक छोटा सा मुद्दा यह था कि डेटा लोड किया गया था और सर्वर पर प्रस्तुत किया गया था, केवल क्लाइंट पर लोड होने पर कुछ भी नहीं बदला जाना था - मुझे लगता है कि मुझे अपोलो नहीं पता है और इसे सही करने के लिए पर्याप्त है। सीधे अपोलो-क्लाइंट का उपयोग करने से मुझे यह समस्या नहीं हुई।

सर्वर-रेंडरिंग के लिए और अधिक मुश्किल यह है कि यदि आपके पास पदानुक्रम में गहराई से प्रश्न हैं। प्रतिक्रिया के पास चीजों को अतुल्यकालिक रूप से प्रस्तुत करने का कोई तरीका नहीं है, अर्थात प्रत्येक घटक को प्रस्तुत करने से पहले तैयार होने की प्रतीक्षा करें। जिसका अर्थ है कि एक ssr ढांचे को या तो करना होगा

डेटा लोड करने के लिए, और एक बार इसे प्रस्तुत करने के लिए, पूरे घटक पेड़ के माध्यम से दो बार जाएं।
रूट में एक एसिंक्स एंट्री पॉइंट प्रदान करें - यह getInitialProps के साथ next.js अप्रोच है

अब सवाल यह है कि क्या अपोलो के पास उन सभी डेटा कॉलों का पता लगाने का एक तरीका है जो एक घटक पेड़ को प्रस्तुत करने के लिए आवश्यक होंगे, और यह सब एक फ़ंक्शन कॉल में करें जो प्रारंभिकप्रॉप प्राप्त करने के लिए प्रदान किया जा सकता है।

nickredmark 17 दिस॰ 2016

@stubailo क्या इसके लिए कोई समाधान है? ^

adamsoffer 18 दिस॰ 2016

@nmaro @ads1018 क्या आपने getDataFromTree देखा है? जैसा कि मेरे उदाहरण में प्रयोग किया गया है: https://github.com/RelateMind/relate/blob/master/hocs/apolo.js

sedubois 18 दिस॰ 2016

BTW मुझे आश्चर्य है कि क्या अब चीजों को सरल बनाया जा सकता है कि https://github.com/zeit/next.js/pull/301 विलय हो गया है। अभी तक उस पर गौर नहीं किया।

sedubois 18 दिस॰ 2016

@sedubois मैंने जाँच की कि साझा करने के लिए धन्यवाद! हाँ, मुझे लगता है कि प्रतिक्रिया-अपोलो का उपयोग करके आपके उदाहरण को नए प्रोग्रामेटिक एपीआई (# 301) के साथ सरल बनाया जा सकता है जिसे अभी मास्टर में विलय कर दिया गया था ताकि आपको सभी पेज घटकों को अपने एचओसी के साथ लपेटना न पड़े। यदि आप उस पर कोई प्रगति करते हैं, तो कृपया मुझे बताएं! अपोलो होमपेज पर अगला.जेएस उदाहरण प्राप्त करने के लिए अच्छा होगा :)

adamsoffer 18 दिस॰ 2016

NB @ads1018 https://github.com/zeit/next.js/pull/301 , CommonsChunkPlugin के साथ सामान्य कोड निकालने के बारे में है, प्रोग्रामेटिक API नहीं। लेकिन हां प्रोग्रामेटिक एपीआई निश्चित रूप से भी मदद करेगा, इसे जारी करने की उम्मीद है।

sedubois 18 दिस॰ 2016

👍1

क्या किसी को रिएक्ट-अपोलो 2.0.0-बीटा.2 रिलीज के साथ काम करने का सौभाग्य मिला है?

adamsoffer 25 दिस॰ 2016

👍1

@sedubois @stubailo यदि आप एक नज़र डालना चाहते हैं तो मैंने अगले + प्रतिक्रिया-अपोलो पर अपना प्रयास बढ़ाया। आप इसे यहां पा सकते हैं: https://github.com/ads1018/frontpage-next-app

एक समस्या जिसका मैं अभी सामना कर रहा हूं, वह यह है कि घटकों को केवल क्लाइंट साइड दिया जा रहा है, सर्वर साइड नहीं। शायद हम सर्वर.जेएस के अंदर प्रतिक्रिया-अपोलो की getDataFromTree विधि का उपयोग कर सकते हैं? या शायद हमारे अपने कस्टम <document> के अंदर? किसी भी सुझाव/पुल अनुरोधों का स्वागत है!

अंततः इस हैलो वर्ल्ड उदाहरण को अगले उदाहरण फ़ोल्डर और अपोलो होम पेज के अंदर शामिल करना अच्छा लगेगा।

adamsoffer 28 दिस॰ 2016

सर्वर-रेंडरिंग डेटा के लिए एकमात्र पूर्व-आवश्यकता यह है कि इसे getInitialProps में ऑब्जेक्ट के रूप में वापस कर दिया गया है, ओवरराइड की कोई आवश्यकता नहीं है।

rauchg 28 दिस॰ 2016

गोचा। मुझे लगता है कि प्रतिक्रिया-अपोलो के साथ यह थोड़ा मुश्किल है क्योंकि @nmaro ने बताया:

सवाल यह है कि क्या अपोलो के पास उन सभी डेटा कॉलों का पता लगाने का एक तरीका है जो एक घटक पेड़ को प्रस्तुत करने के लिए आवश्यक होंगे, और यह सब एक फ़ंक्शन कॉल में करें जो प्रारंभिकप्रॉप प्राप्त करने के लिए प्रदान किया जा सकता है।

adamsoffer 29 दिस॰ 2016

👍1

पकड़ लिया

rauchg 29 दिस॰ 2016

@ ads1018 के बारे में थोड़ा मजाक करने से, यदि शीर्ष स्तर के घटक को getInitialProps पर उजागर किया गया था, तो इसे अपोलो हेल्पर का उपयोग करके स्ट्रिंग में प्रस्तुत किया जा सकता था।

_दस्तावेज़ तब कुछ ऐसा होगा:

export default class MyDocument extends Document {
  static async getInitialProps ({ app }) {
    const wrapped = React.createElement(ApolloProvider, { client }, app)
    const rendered = await renderToStringWithData(wrapped)
    return { html: rendered, initialState: client.store.getState() }
  }

  render () {

    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <ApolloProvider client={client}>
            <Main />
          </ApolloProvider>
          <NextScript />
        </body>
      </html>
    )
  }
}

@rauchg app के अतिरिक्त renderPage को बेनकाब करने के लिए यह एक साधारण परिवर्तन प्रतीत होता है, लेकिन क्या ऐसा कुछ है जिसे मैं देख रहा हूं?

bs1180 30 दिस॰ 2016

🎉8

@ bs1180 आह शानदार। मैं वही ढूंढ रहा था। उम्मीद है, app को बेनकाब करने के लिए यह एक आसान बदलाव है। यह तुरंत नेक्स्ट को एक ग्राफिकल क्लाइंट-फ्रेंडली फ्रेमवर्क बना देगा।

adamsoffer 30 दिस॰ 2016

@ bs1180 मैंने app को renderPage रिटर्न ऑब्जेक्ट के अंदर उजागर किया है। क्या यह आपकी सोच के अनुरूप है?

adamsoffer 4 जन॰ 2017

@ ads1018 बिल्कुल नहीं - आपके संस्करण में render अभी भी कहा जा रहा है, जो अनावश्यक दोहराव होगा यदि renderToStringWithData को मैन्युअल रूप से कॉल किया जा रहा है।

मैंने इस पर कुछ और काम किया है और मेरा अंतिम परिणाम लगभग उतना सुंदर नहीं है जितना मैंने पहली बार कल्पना की थी, मुख्यतः क्योंकि मुख्य ऐप <Main /> घटक (__next div में) के बच्चे के रूप में प्रस्तुत किया जा रहा है, जो चल रहा है किसी भी संदर्भ को ऊपर से आपके आवेदन में पारित होने से दूर करें। तो अपोलो संदर्भ को फिर से जोड़ने के लिए इसे अभी भी एक एचओसी की जरूरत है।

bs1180 4 जन॰ 2017

@ bs1180 मैं देख रहा हूँ। क्या <Main /> को ApolloProvider के बच्चे के रूप में प्रस्तुत करना संभव है ताकि हम संदर्भ को पारित कर सकें?

adamsoffer 4 जन॰ 2017

मुझे यकीन नहीं है कि आपका क्या मतलब है, लेकिन मुझे लगता है कि यह गलत दिशा है। परफेक्ट एसएसआर सिर्फ एक एचओसी के साथ हासिल किया जा सकता है- यहां मेरा कोबल्ड-टुगेदर वर्जन एक शुरुआती बिंदु के रूप में है:

export default (options = {}) => Component => class ApolloHOC extends React.Component {
  static async getInitialProps (ctx) {
    const user = process.browser ? getUserFromLocalStorage() : getUserFromCookie(ctx.req)
    const jwt = process.browser ? null : getJwtFromCookie(ctx.req)

    if (options.secure && !user) {
      return null // skip graphql queries completely if auth will fail
    }

    const client = initClient(jwt)
    const store = initStore(client)

   // This inserts the context so our queries will work properly during the getDataFromTree call,
   //  as well as ensuring that any components which are expecting the url work properly 
    const app = React.createElement(ApolloProvider, { client, store },
      React.createElement(Component, { url: { query: ctx.query }}))

 // this is the most important bit :)
    await getDataFromTree(app)

    const initialState = {[client.reduxRootKey]: {
      data: client.store.getState()[client.reduxRootKey].data
    }}

    return { initialState, user }
  }

  constructor (props) {
    super(props)
    this.client = initClient()
    this.store = initStore(this.client, this.props.initialState)
  }

  render () {
    return (
      <ApolloProvider client={this.client} store={this.store}>
          <Component url={this.props.url} />
      </ApolloProvider>
    ) 
  }
}

initClient और initStore रेडक्स उदाहरण पर बनाए गए हैं। प्रत्येक पृष्ठ तब इस तरह दिखता है:

import ApolloHOC from '../hoc'
import { graphql } from 'react-apollo'

export default ApolloHOC({ secure: false })(() => <b>Hello world</b>)

आशा है कि यह उपयोगी है - मुझे यह जानना अच्छा लगेगा कि क्या जांच करने के अन्य रास्ते हैं, या कुछ ऐसा है जिसे मैं देख रहा हूं।

bs1180 4 जन॰ 2017

👍4

@ bs1180 कूल, यह साझा करने के लिए बहुत उपयोगी धन्यवाद है।

क्या _document.js के अंदर ग्राफ़िकल डेटा वाले पृष्ठों को प्रस्तुत करने के लिए हम कुछ और कर सकते हैं? यह अच्छा होगा यदि हम उस एचओसी को एक साथ बायपास कर सकें जैसे आपने शुरू में प्रस्तावित किया था।

adamsoffer 4 जन॰ 2017

मुझे ऐसा नहीं लगता - जो मैं देख सकता हूं, क्लाइंट साइड रेंडर संदर्भ पर पारित होने वाली किसी भी चीज़ को हटा देगा (चाहे वह अपोलो क्लाइंट हो, मानक रेडक्स स्टोर, थीम इत्यादि) कस्टम _document.js से। हालांकि कुछ अपोलो एसएसआर तर्क को वहां स्थानांतरित किया जा सकता है, फिर भी आवश्यक वस्तुओं को संदर्भ में जोड़ने के लिए कुछ प्रकार के एचओसी/आवरण घटक अभी भी आवश्यक होंगे।
अगले.जेएस इंटर्नल के बेहतर ज्ञान वाले किसी व्यक्ति के पास एक बेहतर विचार हो सकता है।

bs1180 4 जन॰ 2017

😕1

ठीक है अगर आप एक कामकाजी उदाहरण प्राप्त करने का प्रबंधन करते हैं, तो इसे देखना पसंद करेंगे। मैं अभी भी इसे काम करने के लिए लड़ रहा हूं।

adamsoffer 4 जन॰ 2017

मुझे रिएक्ट अपोलो और नेक्स्ट का एक कामकाजी उदाहरण मिला है, मुझे आशा है कि आप में से कई इसे उपयोगी पाएंगे। आप इसे यहां देख सकते हैं: https://github.com/ads1018/next-apolo-example (मैंने अभी का उपयोग करके एक डेमो भी तैनात किया है।)

मैंने withData() नामक अपने पृष्ठ के अंदर एक एचओसी का उपयोग करना समाप्त कर दिया जो पृष्ठ को ApolloProvider के साथ लपेटता है। मुझे शुरुआत में प्रति पृष्ठ आधार पर प्रदाताओं का उपयोग करके बंद कर दिया गया था, एक बार एक फ़ाइल के अंदर, लेकिन मुझे वास्तव में कुछ स्मार्ट लोगों द्वारा आश्वस्त किया गया था कि यह पठनीयता और मापनीयता के लिए बेहतर है। मुझे वास्तव में लगता है कि withData(MyComponent) काफी अच्छा दिखता है और पाठक को अच्छा संदर्भ प्रदान करता है (कोई इरादा नहीं है) कि एक विशेष पृष्ठ डेटा प्राप्त करता है।

मुझे सही दिशा में इंगित करने के लिए धन्यवाद @ bs1180 और @rauchg । यदि आप रेपो में with-apollo उदाहरण जोड़ना चाहते हैं तो मुझे बताएं और मैं एक पुल अनुरोध बना सकता हूं।

adamsoffer 7 जन॰ 2017

👍7

धन्यवाद @ ads1018 😊 मेरे उदाहरण https://Relate.now.sh की तुलना में, क्या यह उदाहरण अपोलो को गहरे नेस्टेड घटकों (getInitialProps के कैस्केड से बचने) में उपयोग करने के मुद्दे को हल करता है? हो सकता है कि उदाहरण से पता चले कि यह मुख्य दर्द बिंदु है। और मुझे यकीन है कि इसे उदाहरण फ़ोल्डर में जोड़ने की बहुत सराहना की जाएगी।

sedubois 7 जन॰ 2017

@sedubois मैं आपके द्वारा # 192 में संदर्भित त्रुटि को पुन: उत्पन्न करने में असमर्थ हूं। मैं बिना किसी समस्या के नेस्टेड घटकों के अंदर अपोलो का उपयोग कर रहा हूं। यदि आप मेरे उदाहरण को कम करते हैं और इसे पुन: पेश करने में सक्षम हैं तो क्या आप मुझे बताएंगे?

adamsoffer 8 जन॰ 2017

धन्यवाद @ads1018 , https://github.com/ads1018/next-apollo-example/issues/2 में सुधारों के साथ चीजें बढ़िया काम करती हैं। मैंने अपना उदाहरण भी अपडेट किया: https://github.com/RelateNow/relate

sedubois 10 जन॰ 2017

😄1

अच्छा काम, @ads1018 @sedubois! मैं इस पर और # 192 का अनुसरण कर रहा हूं, मैं अपोलो और वेनिला रिएक्ट का उपयोग करके प्रीफ़ेचिंग/एसिंक दृश्यों की भी जांच कर रहा हूं।

क्या आपने देखा है या आप प्रत्येक पृष्ठ के प्रदर्शित होने से पहले getDataFromTree चलाने के साथ किसी भी प्रदर्शन समस्या का अनुमान लगाते हैं? चूंकि तकनीकी रूप से, वह विधि पूरे पेड़ को पुनरावर्ती रूप से प्रस्तुत करती है, और फिर जब getInitialProps वापस आती है, तो रिएक्ट पेड़ को फिर से प्रस्तुत करता है (यद्यपि कैश से डेटा के साथ)।

असली अच्छा समाधान मुझे लगता है कि सभी बाल डेटा कैश किए जाने के लिए दो बार प्रतिपादन एकमात्र विकल्प है, बस उत्सुक है कि आप प्रदर्शन के बारे में क्या सोचते हैं।

estrattonbailey 10 जन॰ 2017

अरे @estrattonbailey - मैंने कोई प्रदर्शन समस्या नहीं देखी है और मुझे कोई उम्मीद नहीं है। वास्तव में, यह बहुत तेज़ है! getDataFromTree चलाने के लिए, मैंने उस विधि कॉल को एक सशर्त के अंदर लपेट लिया है जो जांचता है कि हम सर्वर पर हैं या नहीं, इसलिए इसे केवल तभी कॉल किया जाता है जब कोई उपयोगकर्ता पहली बार ऐप लोड करता है और बाद के सभी मार्ग परिवर्तनों पर छोड़ दिया जाता है . यदि आप प्रदर्शन देखना चाहते हैं तो आप डेमो के साथ खेल सकते हैं। कृपया मुझे बताएं कि क्या आपके पास कोई प्रतिक्रिया है!

adamsoffer 11 जन॰ 2017

@ ads1018 आपके उदाहरण के लिए कुछ उपाय:

इस तरह प्रारंभिक स्थिति को सरल बनाएं
इस तरह की फाइलों में अलग मिडलवेयर, स्टोर और रेड्यूसर
isServer को सरल बनाएं typeof window !== 'undefined' , ड्रॉप !!ctx.req
उस IS_SERVER const को lib में निकालें, इसे परम के रूप में पास करने की आवश्यकता नहीं है

sedubois 11 जन॰ 2017

👍1

@ads1018 सुनकर अच्छा लगा! अच्छा सा डेमो।

मेरे कहने का मतलब यह है: यह पैमाना कितना अच्छा होगा? हालांकि मैंने अभी तक नेक्स्ट का उपयोग नहीं किया है, जैसा कि मैं इसे समझता हूं, नेक्स्ट प्रत्येक रूट ट्रांजिशन पर getInitialProps कॉल करता है, यदि पेज घटक यानी pages/page.js पर उपलब्ध है। एक पूर्ण पैमाने पर ऐप/वेबसाइट पर सैकड़ों नोड्स और बहुत सारे डेटा आ रहे हैं, मुझे लगता है कि प्रत्येक मार्ग पर दो बार प्रतिपादन कुछ विलंबता में योगदान दे सकता है।

जिस परियोजना पर मैं काम कर रहा हूं वह एक बड़े पैमाने पर संपादकीय साइट है, इसलिए मुझे आपके सहित विभिन्न दृष्टिकोणों की कुछ बेंचमार्किंग करने की उम्मीद है। यदि आप चाहें तो ट्विटर पर और चर्चा करना पसंद करेंगे। आपके काम के लिए धन्यवाद!

estrattonbailey 11 जन॰ 2017

@estrattonbailey Gotcha। मुझे लगता है कि यह बहुत अच्छा पैमाना होगा। प्रारंभिक पृष्ठ लोड के लिए, getInitialProps केवल सर्वर पर निष्पादित होगा। आप सही हैं कि getInitialProps क्लाइंट पर फिर से निष्पादित किया जाएगा लेकिन कोई डेटा दो बार अनुरोध नहीं किया जाएगा क्योंकि getDataFromTree एक सशर्त के अंदर लपेटा गया है जो जांचता है कि हम सर्वर पर हैं या नहीं।

साइड नोट - यदि आप पृष्ठ पर बहुत सारे घटकों और डेटा के अनुरोध के कारण प्रारंभिक पृष्ठ लोड समय के बारे में चिंतित हैं, तो आप हमेशा अपोलो को एसएसआर के दौरान जानबूझकर विशिष्ट प्रश्नों को छोड़ने और ssr: false पास करके क्लाइंट को ऑफ़लोड करने के लिए कह सकते हैं। अपोलो क्वेरी विकल्पों में

यदि आप आगे चर्चा करना चाहते हैं तो मैं आपके साथ ट्विटर पर जुड़ूंगा :)

adamsoffer 12 जन॰ 2017

👍2

आप सही हैं कि क्लाइंट पर getInitialProps फिर से निष्पादित किया जाएगा लेकिन कोई डेटा दो बार अनुरोध नहीं किया जाएगा क्योंकि getDataFromTree एक सशर्त के अंदर लपेटा गया है जो जांचता है कि हम सर्वर पर हैं या नहीं।

ध्यान में रखना महत्वपूर्ण है getInitialProps क्लाइंट साइड पर तभी निष्पादित होता है जब <Link> के साथ ट्रांजिशन किया जाता है, न कि शुरुआती लोड के बाद

rauchg 12 जन॰ 2017

👍4

@ ads1018 @estrattonbailey AFAIK पहले पेज लोड पर अभी भी 2 रेंडर सर्वर-साइड हैं: getDataFromTree निष्पादित हो जाता है और पूरे पेड़ को आंतरिक रूप से प्रस्तुत करता है, फिर HTML प्रतिक्रिया बनाने के लिए रेंडर को फिर से बुलाया जाता है। यह मत सोचो कि क्या इससे बचने का कोई तरीका है, लेकिन मुझे लगता है कि SSR द्वारा टाले गए नेटवर्क राउंड-ट्रिप के लिए अभी भी काफी प्रदर्शन है।

मुझे लगता है कि प्रदर्शन अधिकतम होता है जब ग्राफ़क्यूएल सर्वर को उसी मशीन पर होस्ट किया जाता है जैसे नेक्स्ट.जेएस सर्वर, तो आप हमेशा कोशिश कर सकते हैं कि यदि आप प्रदर्शन से चिंतित होंगे (इस बिंदु पर, मैं अपने ऐप को ग्राफकूल के साथ प्रोटोटाइप करता हूं बैकएंड, जबकि Next.js Now/Zeit World के साथ परिनियोजित है)।

sedubois 13 जन॰ 2017

👍1

@sedubois @estrattonbailey अगर मैं गलत हूं तो मुझे सुधारो, लेकिन हम अभी भी केवल एक बार प्रतिपादन कर रहे हैं। getDataFromTree पेड़ को प्रस्तुत नहीं करता है, यह केवल एक वादा देता है जो हमारे अपोलो क्लाइंट स्टोर में डेटा तैयार होने पर हल हो जाता है। उस बिंदु पर जब वादा हल हो जाता है, हमारा अपोलो क्लाइंट स्टोर पूरी तरह से शुरू हो जाएगा और हम वैकल्पिक रूप से पेड़ को प्रस्तुत कर सकते हैं यदि हम HTTP अनुरोध के जवाब में कड़े परिणाम पास करना चाहते हैं लेकिन हम अपने उदाहरण में ऐसा नहीं कर रहे हैं।

adamsoffer 14 जन॰ 2017

👍2

getDataFromTree पेड़ को प्रस्तुत नहीं करता है

@ ads1018 AFAIK और अपोलो कोड को देखते हुए, यह _does_ पेड़ को पुनरावर्ती रूप से प्रस्तुत करता है (केवल अपोलो डेटा-फ़ेचिंग को ट्रिगर करने के लिए)। तो यह 2 पहले पेज लोड पर सर्वर-साइड प्रस्तुत करता है।

sedubois 16 जन॰ 2017

लेकिन वैसे भी, आपके डेमो के लिए धन्यवाद, अब हमारे पास अपोलो और नेक्स्ट के बीच एक प्रयोग योग्य एकीकरण है, और अपोलो एसएसआर प्रदर्शन के बारे में शेष प्रश्नों में नेक्स्ट.जेएस के लिए कुछ भी विशिष्ट नहीं है, अब मुझे लगता है। मैं वहां इसके बारे में प्रश्न पूछने का सुझाव दूंगा।

sedubois 16 जन॰ 2017

👍2

@sedubois वैसे भी रेंडर क्या है? मैं इसे चलना और पेड़ को हिलाना कहूंगा। ऐसा लगता है कि बहुत अच्छी तरह से अनुकूलित किया गया है - setState को दबा दिया गया है और डोम में कोई सामंजस्य नहीं है।

tpreusse 16 जन॰ 2017

👍4

@ ads1018 अच्छा उदाहरण! ऐसा लगता है कि इसे यहां भी विकी में जोड़ा गया है, इसलिए शायद इस मुद्दे को बंद किया जा सकता है?

cc @rauchg

helfer 3 फ़र॰ 2017

❤1 👍1

हमें Apollo ब्लॉग पर Apollo + Next.js के बारे में एक ब्लॉग पोस्ट मिलनी चाहिए!

stubailo 3 फ़र॰ 2017

👍10

@stubailo @ads1018 का उदाहरण बहुत अच्छा है समान अपोलो सिद्धांतों का उपयोग करके कुछ बड़ा करने के लिए, मेरे ऐप की जांच कर सकते हैं: https://github.com/relatenow/relate

sedubois 3 फ़र॰ 2017

😄2

धन्यवाद @हेलफर। मैं रोमांचित हूं कि यह कैसे निकला। मुझे ऐसा लगता है कि मैंने नेक्स्ट.जेएस + अपोलो के साथ ऐप डेवलपमेंट की पवित्र कब्र की खोज की है। मैं सुसमाचार फैलाने के प्रयास में एक ब्लॉग पोस्ट का अनुसरण करने का अर्थ रखता हूं, लेकिन अभी तक इसके आसपास नहीं पहुंचा हूं। @stubailo मुझे अपोलो माध्यम प्रकाशन पर एक टुकड़े पर सहयोग करने में खुशी होगी :)

adamsoffer 3 फ़र॰ 2017

👍1

उदाहरण और उसकी प्यारी ऐप के साथ मदद करने के लिए @sedubois को बहुत चिल्लाओ। मैं

adamsoffer 3 फ़र॰ 2017

🎉4 👍4

@ads1018 आपको ब्लॉग पर लाना पसंद करेंगे। जब आप इसके बारे में बात करने के लिए तैयार हों, तो मुझे (थिया) अपोलो स्लैक पर पिंग करें। :)

theadactyl 3 फ़र॰ 2017

👍2

@helfer आप बिल्कुल सही हैं। मुझे यह देखने के लिए एक नया मुद्दा पास करना चाहिए कि क्या मुद्दों को बंद किया जा सकता है

@stubailo @theadactyl भयानक विचार ❤️

timneutkens 3 फ़र॰ 2017

किसी को देखने के लिए किसी समस्या/पीआर के बारे में पता है - डेटा को दो बार सर्वर पक्ष का अनुरोध करने के संबंध में? बस उत्सुक

morgs32 4 सित॰ 2017

👍2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Next.js: न्यूनतम अपोलो उदाहरण

सबसे उपयोगी टिप्पणी

सभी 60 टिप्पणियाँ

संबंधित मुद्दों