Forma recomendada de usar GraphQL en la aplicación Next.js

Encontramos la contestación a esta preocupación, al menos eso pensamos. Si tienes dudas dínoslo y con placer te responderemos

Solución:

Encontré otra buena solución de enlace para Next.js y GraphQL.

Quiero compartirlo contigo. Empecemos.

Nota: Supongo que ya tiene instalada la aplicación Next.js. Si no, sigue esta guía.

Para construir esta solución necesitamos:

• @apollo/reaccionar-ganchos
• apolo-cache-inmemory
• apolo-cliente
• apolo-enlace-http
• gráficoql
• etiqueta graphql
• isomorphic-unfetch
• siguiente con apolo

1. ejecutar el comando npm:

npm install --save @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo

2. crear el archivo de configuración de Appolo, por ejemplo. en carpeta ./config y llámalo appollo.js. Código de archivo a continuación:

import  ApolloClient  from "apollo-client";
import  InMemoryCache  from "apollo-cache-inmemory";
import withApollo from "next-with-apollo";
import  createHttpLink  from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const GRAPHQL_URL = process.env.BACKEND_URL || "https://api.graphql.url";

const link = createHttpLink(
  fetch,
  uri: GRAPHQL_URL
);

export default withApollo(
  ( initialState ) =>
    new ApolloClient( )
    )
);

3. crear _app.js archivo (tipo de contenedor) en ./pages carpeta con el siguiente código:

import React from "react";
import Head from "next/head";
import  ApolloProvider  from "@apollo/react-hooks";
import withData from "../config/apollo";

const App = ( Component, pageProps, apollo ) => 
  return (
    
      
        
      
      
    
  )
;

export default withData(App);

4. crear un componente de consulta reutilizable, p. ./components/query.js

import React from "react";  
import  useQuery  from "@apollo/react-hooks";

const Query = ( children, query, id ) =>   
  const  data, loading, error  = useQuery(query, 
    variables:  id: id 
  );

  if (loading) return 
Loading...
;
  if (error) return 
Error: JSON.stringify(error)
;
  return children( data );
;

export default Query;

5. crear un componente para nuestros datos obtenidos a través de GraphQL

import React from "react";
import Query from "../components/query";
import GRAPHQL_TEST_QUERY from "../queries/test-query";

const Example = () =>   
  return (
    

      
        ( data:  graphqlData  ) => 
          return (
            

              graphqlData.map((fetchedItem, i) => 
                return (
                  

                    fetchedItem.name
                  
                );
              )
            
          );
        
      
    
  );
;

export default Example;

6. crea nuestra consulta GraphQL dentro ./queries/test-query. Nota: Supongo que tenemos acceso a nuestros datos y propiedades de ejemplo. id y name a través de GraphQL

import gql from "graphql-tag";

const GRAPHQL_TEST_QUERY = gql`
  query graphQLData 
    exampleTypeOfData 
      id
      name
    
  
`;

export default GRAPHQL_TEST_QUERY;

7. para mostrar nuestro resultado crear index.js archivo (página de inicio) en ./pages carpeta con el siguiente código:

import Example from './components/example';

const Index = () => 


export default Index;

Eso es todo.. disfruta y amplía esta solución como quieras..

Sección de Reseñas y Valoraciones

Si te apasiona este mundo, eres capaz de dejar una reseña acerca de qué te ha impresionado de esta noticia.

Utiliza Nuestro Buscador