Giter Club home page Giter Club logo

Comments (6)

adamsoffer avatar adamsoffer commented on August 20, 2024 1

You should only wrap the page components. You don't have to touch _app.js.

from next-apollo.

albsa avatar albsa commented on August 20, 2024

Sorry, I made a mistake by only wrapping the _app.js with withData instead of each page component. If the page component is wrapped also with the HOC the expected result is given.

from next-apollo.

adamsoffer avatar adamsoffer commented on August 20, 2024

@albsa ah yeah I should definitely make that more clear in the docs that the HOC is meant to be used on pages only. Thanks for the feedback.

from next-apollo.

albsa avatar albsa commented on August 20, 2024

@adamsoffer that would be great and more clear! However, still is something not clear for me, do we need to do something with _app.js?

Because now _app.js is wrapped with ApolloProvider

import React from 'react'
import App from 'next/app'
import { ApolloProvider } from '@apollo/react-hooks';
import withData from '../lib/apollo-config';
....

class MyApp extends App {


  render () {
    const { Component, pageProps, apolloClient } = this.props
    return (
      <ApolloProvider client={apolloClient}>
        <LayoutWrapper>
          <Component {...pageProps} />
        </LayoutWrapper>
      </ApolloProvider>
    )
  }
}

export default withData(MyApp);

Or should we only wrap the page components and do nothing with the _app.js?

from next-apollo.

albsa avatar albsa commented on August 20, 2024

@adamsoffer clear, thanks for the quick answers and enjoy your weekend!!

from next-apollo.

albsa avatar albsa commented on August 20, 2024

hey @adamsoffer here I am again.
Got a confusing thing here.

I am using the catch all route to render certain components depending on the outcome of the graphql data.
However, it seems that the components are not rendering server side, and also nog the catch-all page component.

For example.

I have this [...path].js file in my pages folder.
This file is matched to routes of no specific folder or file exists for it in the pages folder.

So if [...patch].js is reached, the graphql call will check wether the URL path is a product type, category type of static page.

Based on that it will fetch the data from Magento 2 for example.
Therefore it will render the category, product or page component.

However, this is not rendering on the server side, but only client side.

Als in my menu component, I render the menu items based on the category items that are fetched by graphql from Magento 2, also this is not a page component so the withData has no effect here, the menu is rendering on the client side only.

Hopefully you understand what I mean.

Do you know what solution would fit here to realize the server side rendering?

from next-apollo.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.