web-dev-qa-db-fra.com

API NEXTJS ET CONTEXTE

Travailler avec NEXT.JS et j'essaie de sauvegarder des données à l'intérieur de l'état d'API context après la récupération dans GetinitialProps, pour corriger les forages d'accessoires.

Mais puisque GetinitialProps est une méthode statique, nous ne pouvons pas y accéder via cela.Context. J'ai réussi à les sauvegarder dans le composantDidmount, mais dans ce cas, l'état de contexte est vide sur la charge de première page jusqu'à ce qu'elle apparaisse. Je ne sais pas quelle serait la meilleure pratique dans ce cas. Dans quel cycle de vie dois-je enregistrer des données initiales au contexte afin de les avoir tout de suite comme avec des accessoires qui passent?

reactjsnext.js
13
Goran Jakovljevic

vous ne pouvez pas utiliser contextapi dans Next.js Server-Server (SSR), car il est contre des règles de hameçons. https://reactjs.org/warnings/invalid-hook-call-warning.html

Réagir sera exécuté getInitialProps d'abord, la meilleure solution consiste donc à récupérer des données et à la transmettre à travers votre composant à l'aide de contextapi.

Allons-y et voyons qu'il travaillait comme ci-dessous:

Créez votre composant AppProvider

Implémentez vos fonctions de fournisseur de contexte que vous souhaitez passer via votre React Composants.

Pour ce cas, nous créerons notre fournisseur de contexte global en appuyant toute la demande.

const AppProvider = ({ children }) => {
  const [galleryData, setGalleryData] = React.useState([]);

  const handleGalleryData = galleryData => {
    setGalleryData(galleryData);
  }

  const contextProps = {
    galleryData,
    handleGalleryData
  };

  return (
    <AppContext.Provider value={contextProps}>
      {children}
    </AppContext.Provider>
  );
}

Ensuite, enveloppez votre application avec ce nouveau fournisseur.

<AppProvider>
  <App />
</AppProvider>

Et dans vos pages, telles que index.js, Essayez de cette façon:

Index.getInitialProps = async (props) => {
  const { req, res, query, ...others } = props;

  // use your env variables, endpoint URIs
  // ..

  ... fetch whatever you want..
  const galleryProps = await fetch(endpoint); // isomorphic-unfetch

  return {
    galleryProps,
    query,
    ...others
  };
}

Commencez à utiliser contextapi sur vos composants

Ensuite, dans vos composants, vous pouvez vérifier ces données et la stocker dans contextapi.

const Index = props => {
  const { galleryProps, query, ...others } = props;
  const [galleryData, setGalleryData] = useState(galleryProps);
  const { handleGalleryData, ...contextRest } = useContext(AppContext);
  ...

  // Here you're going to store data into ContextAPI appropriatly.
  useEffect(() => {
    if (typeof galleryProps === 'object' && _.keys(galleryProps).length > 0) {
      handleGalleryData(galleryProps);
    }
  }, [handleGalleryData]);

  // Other times your page is loaded, you will GET this data from ContextApi, instead of SSR props.
  useEffect(() => {
    if (_.keys(galleryDataProps).length <= 0 && _.keys(contextRest.galleryData).length > 0) {
      setGalleryData(contextRest.galleryData);
    }
  }, []);

....

return (
  <div>
    {JSON.stringify(galleryData)}
  </div>
);

L'affaire d'utilisation ci-dessus n'est pas la meilleure, mais elle comprend la façon dont les choses fonctionnent avec contextapi dans les applications suivantes.js. Je vais l'expliquer ci-dessous:

  • La première useEffect() vérifie si le composant a reçu un objet de données des accessoires le stockant sur contextapapi.

  • Le second vérifie si le magasin a reçu des données

Vous pouvez récupérer des données en mode SSR via getInitialProps avant la charge de vos composants.

Les références

3
Francis Rodrigues