GraphQL CodeGen con Next.js – Blog Webkul

En este blog, exploraremos la introducción de GraphQL CodeGen y sus beneficios, luego avanzaremos hacia la configuración compleja de GraphQL Codegen con apollo-client para nuestro próximo proyecto js. Presentamos CodeGen GraphQL Codegen es una herramienta que facilita el trabajo con las API GraphQL en TypeScript al generar automáticamente tipos y consultas basadas en nuestro esquema. Reduce la cantidad de código repetitivo que necesita escribir y facilita el trabajo con las API GraphQL. Para usarlo, definiríamos nuestro esquema en un archivo .graphql o .graphqls y luego usaríamos un complemento codegen para generar los tipos y consultas de TypeScript de los que hablaremos con más profundidad. El código generado incluye interfaces para tipos GraphQL y funciones para realizar consultas y mutaciones. Beneficios de CodeGen: 1. Generación de código automatizada: GraphQL Code Generator simplifica el proceso de desarrollo al crear automáticamente consultas escritas, mutaciones y suscripciones para bibliotecas front-end como React, Next.js y otros marcos y bibliotecas diversos. Ya sea que utilice Apollo Client, URLQL o React Query, garantiza un código consistente y con seguridad de escritura. 2. Seguridad y coherencia de los tipos: la gestión manual de las operaciones de GraphQL puede generar problemas como tipos de escritura obsoletos y errores tipográficos. Al automatizar este proceso, GraphQL Code Generator mejora la estabilidad de su pila y mejora la experiencia del desarrollador. 3. Flujo de trabajo eficiente: sin el generador de código GraphQL, los desarrolladores suelen escribir código repetitivo para consultas y mutaciones. Al analizar su esquema GraphQL, la herramienta genera código completamente escrito, eliminando la necesidad de mantenimiento manual del tipo TypeScript y mejorando su flujo de trabajo de desarrollo. 4. Amplio soporte de idiomas: aunque GraphQL Code Generator admite TypeScript de forma predeterminada, también puede generar código para otros idiomas. Automatiza las prácticas comunes de recuperación de datos y mejora la seguridad de tipos en código que normalmente se escribiría manualmente. Configuración de Apollo Client con Graphql Code-Gen: Nuestro enfoque principal será configurar GraphQL Codegen con Apollo Client en un entorno Next.js. Para la configuración, podemos seguir esta configuración en el próximo blog del proyecto js que cubre todo lo relacionado con la configuración. Asumimos que está familiarizado con la configuración del cliente Apollo en un proyecto Next.js. De lo contrario, puede consultar la configuración del cliente Apollo con el blog Next.js para obtener más información. Continuamos con los pasos para configurar Apollo Client con GraphQL Codegen en una aplicación Next.js. Paso 1: Comience creando una nueva aplicación Next.js: npx create-next-app@latest cd next_codegen Paso 2: Instalación de dependencias Instale las dependencias necesarias para Apollo Client, GraphQL y GraphQL Codegen. npm install @apollo/graphql client @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operatives @graphql-codegen/typescript-react-apollo Paso 3: Inicialice el cliente Apollo Inicialice el cliente Apollo en Siguiente . aplicación js. Cree un nuevo archivo llamado apollo-client.js en el directorio lib. importar {ApolloClient, InMemoryCache} desde ‘@apollo/client’; exportar cliente constante = nuevo ApolloClient({ uri: ‘https://graphqlzero.almansi.me/api’, caché: nuevo InMemoryCache(), }); Paso 4: Integre con Next.js En su aplicación Next.js, ajuste sus páginas con Apollo Provider e importe los enlaces generados para consultas y mutaciones. // páginas/_app.js import «@/styles/globals.css»; tipo de importación {AppProps} desde «siguiente/aplicación»; importar { ApolloProvider } desde ‘@apollo/client’; importar {cliente} desde «@/lib/apollo-client»; exportar función predeterminada App({ Componente, pageProps }: AppProps) { return( ); } Paso 5: Configurar GraphQL Codegen Cree un archivo codegen.ts en el directorio raíz de su proyecto y defina la configuración con nuestro punto final del servidor GraphQL para GraphQL Codegen: // codegen.ts // cambie el URI del esquema a nuestro módulo de punto final del servidor GraphQL .exports = {sobrescribir: verdadero, esquema:’https://graphqlzero.almansi.me/api’, documentos: [
‘src/queries/**/*.graphql’,
‘src/mutations/**/*.graphql’
]generar: { ‘src/generated/graphql.tsx’: { complemento: [
‘typescript’,
‘typescript-operations’,
‘typescript-react-apollo’
] } } }; Ahora necesitamos crear una carpeta de consultas y mutaciones en nuestra carpeta src como está configurada en nuestro codegen.ts. Aquí el directorio de consulta contiene todos los archivos de consulta, aquí nuestro GetAlbum .graphql estará allí, de manera similar también podemos crear un archivo de mutación Graphql en el cual crear el directorio de mutación. # src/queries/GetAlbum.graphql query GetAlbum($id: ID!) { photo(id:$id) { id título url miniaturaUrl álbum { título id } } } Paso 6: Generar consultas y mutaciones Para generar tipos de TypeScript y React Apollo se conecta a sus consultas y mutaciones GraphQL, ejecute el siguiente comando. npx graphql-codegen –config codegen.ts Después de presionar el comando, nuestros ganchos se generarán en el directorio src y el directorio generado contendrá un montón de ganchos. Sin embargo, también podemos cambiar que donde necesitemos generar este directorio, se genere como un archivo codegen.ts configurado. // codegen.ts // cambia el URI del esquema al punto final de nuestro servidor Graphql module.exports = { override: true, esquema:’https://graphqlzero.almansi.me/api’, docs: [
….
], generar: { ‘src/generated/graphql.tsx’: { … } }; Paso 7: Ejemplo de uso Ahora, demostremos cómo usar los enlaces generados para consultar datos en su proyecto. Por ejemplo, en sus páginas/index.js. importar Reaccionar desde ‘reaccionar’; importar { useGetAlbumLazyQuery } desde ‘@/generated/graphql’; const MiAplicación = () => { const [getAlbum, { loading, error, data }] = useGetAlbumLazyQuery(); React.useEffect(()=>{ // Función para recuperar los datos del álbum const fetchAlbumData = (code:string) => { getAlbum({ variables: { id: code // Pase la variable del código del álbum aquí } }); }; fetchAlbumData (‘2’);[getAlbum]) si (cargando) regresa

Cargando…

; si (error) regresa

Error: {error.mensaje}

; console.warn( ‘datos ===> ‘ , datos) return (

Álbum

    {/* completar datos */}

); }; exportar MyApp predeterminada; Ahora podremos ver nuestro ID provisto de los datos de 2 álbumes que tenemos en el registro de la consola. Finalmente, la estructura de nuestro proyecto se verá así. Conclusión En conclusión, combinar la generación de código GraphQL con Apollo Client y Next.js puede mejorar significativamente su proceso de desarrollo. Al utilizar la generación de código, podemos garantizar la seguridad de tipos y reducir los errores manuales en consultas y mutaciones de GraphQL. Apollo Client proporciona un sólido conjunto de herramientas para trabajar con las API GraphQL, incluido el almacenamiento en caché y las actualizaciones en tiempo real, mientras que Next.js ofrece renderizado del lado del servidor y optimizaciones de rendimiento. Juntas, estas tecnologías crean una poderosa pila para crear aplicaciones web eficientes y escalables con GraphQL. Comience su desarrollo sin cabeza con Webkul. Versión actual del producto: 1 versión de marco compatible: 1 registro de visualización

About Francisco

Check Also

El futuro de las apps de vídeos cortos #Infografía

El futuro de las aplicaciones de vídeos cortos es brillante, con rápidos avances tecnológicos y …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *