El gráfico destacado | Construyendo sobre Ethereum con GraphQL, The Graph y Next.js

Sin duda, utilizar el escalado para abordar la congestión de Ethereum es útil para una adopción más amplia. Como todos sabemos, las costosas transacciones en cadena y la experiencia del usuario mejorada son razones por las que la red Ethereum insta a escalar. Optimistic Rollup y ZK Rollup son dos soluciones Layer2 destacadas. Optimistic Rollup es compatible con EVM y tiene un bajo costo técnico, mientras que ZK Rollup tiene una duración de retiro más corta y un menor costo informático en cadena. zkSync, como ZK Rollup compatible con EVM, está mostrando un gran impulso.

Ontro 3er taller, presentado por The Graph, de la serie en Hackathon de IOSG Ventures y Chainlink Layer2, fue en vivo el 18 de julio a las 8:00 p.m. ¡Este directo ha recibido un gran apoyo y me gusta de nuestro encantador público! ¡No te preocupes si te perdiste el video, haz clic y mira la repetición a continuación! También traemos el resumen completo en texto para todos aquellos a quienes les encantaría leer y aprender más al respecto.

- ¡Empecemos!

Entonces sí, estoy en la playa.h. Ahí voy a estar transmitiendo, desde la playa. Porque eso es lo que hacemos. Trabajamos donde queremos y hoy trabajo desde la playa. Voy a estar transmitiendo desde aquí. Quizás me tome un pequeño descanso en medio de la transmisión, tomando algo de beber o comida o algo así, porque estaremos aquí alrededor de una hora.

Pero hoy vamos a hacer un gran lanzamiento de The Graph. De eso es de lo que voy a hablar hoy. Tenemos un proyecto bastante interesante que vamos a desarrollar. Voy a hablar sobre algunas de las ideas sobre algunas de las cosas que hemos hecho aquí, por lo que estamos muy entusiasmados con esto. Solo he estado en este equipo durante unos tres meses, pero ellos han estado trabajando en esto durante unos cuatro años. Entonces, algunas de las ideas que se están lanzando hoy han sido pensadas, pero han sido ideas teóricas, incluso conceptos que se habían difundido en la industria pero que en realidad nadie ha implementado algo que es tan complicado y tan completo con una interfaz de usuario que la gente pueda realmente interactuar en un montón de niveles diferentes. Así que estamos muy entusiasmados con eso.

Lo que voy a hacer hoy es simplemente mostrar cómo construir una API utilizada en el front-end. Voy a hablar un poco sobre la red y cómo puedes participar de diferentes maneras. Hoy escribiremos algo de código. De eso se trata principalmente. Si no has visto el lanzamiento, déjame seguir adelante y vincularlo aquí. Vea si puede ver parte del trabajo que se ha realizado simplemente leyendo la publicación del blog.

Sí, alguien mencionó la Conferencia Ethereum en París. No tengo entradas pero aun así estaré allí. Entonces, incluso si estás en París y no vienes a esa conferencia, contáctame. Me encantaría pasar el rato y traer un montón de artículos de Graph. Traigo camisetas y traigo pegatinas. Te invito una bebida o te invito café. Quizás incluso te invite a cenar. Estaré allí durante aproximadamente una semana, así que estoy deseando que llegue.

Compartí un enlace al lanzamiento. Lo que lanzamos fueron dos nuevos productos o dos nuevas funciones de The Graph. Uno se llama Subgraph Studio, que permite a desarrolladores como yo crear estas API abiertas sobre conjuntos de datos abiertos. Puedo seleccionar mi propia API, lo que significa que básicamente puedo decir, oye, quiero que alguien en la red comience a indexar los datos de mi API. Y puedo empezar a ganar dinero en función de los feeds que soy capaz de generar. Básicamente puedo encontrar las API de otras personas y puedo indicarlas y ganar dinero con ellas también. Puedo ser un ingeniero de software que simplemente ejecuta un nodo, un indexador. Puedo ganar dinero de esa manera. Así que hay todo tipo de formas en las que puedes ganar dinero.

Lo que más me interesa de esto es que creo que será un incentivo de una manera que permitirá a la gente ganar dinero. Ese es el mejor incentivo. Ese es uno de los incentivos que más me motiva. Principalmente porque crecí, diría, pobre, o algo así, pero diría que durante los primeros diez años de mi vida, apenas ganaba dinero.

Entonces el software me ha estado permitiendo. He visto a muchas otras personas en todo el mundo, muchas personas que en realidad son parte del protocolo The Graph en todo el mundo y que han estado participando desde el principio y que tienen libertad financiera gracias a ello. Así que estoy muy entusiasmado con el incentivo que existe.

Creo que es una de las cosas más interesantes a las que se le puede ocurrir una idea utilizando todos estos conjuntos de datos abiertos que están disponibles en cualquiera de los diferentes tipos de redes que admitimos. En este momento, se trata principalmente de blockchain y fuentes de datos descentralizadas. Pero la idea en el futuro es que podremos hacer que nuestros indexadores trabajen con cualquier tipo de conjunto de datos abiertos. De hecho, hoy en día mucha gente está evitando eso, buscando conjuntos de datos que quieran indexar y construyéndolos en algún tipo de red existente. También es posible escribir esas transacciones e indexarlas en una API Graph.

Dicho esto, se nos ocurra una buena idea para una aplicación o API. Y acabo de armar esa API. Lo desplegué. Ahora está en la interfaz de usuario. Puedes consultarlo en el Panel de control. Cualquiera que quiera usarlo ahora puede construir una interfaz encima de él. Pueden usar los contratos inteligentes como una capa de transacción como lo harían antes, pero ahora pueden consultarlos en su interfaz. Vamos a crear una interfaz de usuario que lo muestre. Al hacerlo, cualquiera que quiera usarlo puede usarlo, y cualquier dinero que se cobre por ello ahora, en lugar de ir a empresas masivas como Google y AWS. Por supuesto, es posible que las personas que administran su infraestructura todavía estén en ellas, pero las ganancias reales van a parar a los desarrolladores. Para mí, esa también es una de las partes más interesantes.

Dicho esto, esto es sólo una descripción general. Si ha estado siguiendo The Graph, ya comprende algo de esto. Pero creo que muchas de las personas, los trabajadores mineros, ya sabes, son desarrolladores web que se encuentran en el espacio web tradicional. Aún es bastante pronto. A pesar de que estamos empezando a alcanzar cifras realmente sorprendentes e interesantes, recientemente alcanzaron más de mil millones de consultas en un solo día. Estamos creciendo sobre un acantilado realmente rápido. Ese tipo de crecimiento exponencial es lo que buscas cuando entras en una empresa o cuando quieres entrar temprano en una tecnología. No se trata del número total actual, se trata del crecimiento, porque en un año si mantienes el mismo crecimiento, lo aplastarás. Entonces eso es lo que me interesa.

Dicho esto, voy a empezar a construir. Para hacer eso, compartiré mi pantalla. Sigamos adelante y hagamos eso. Voy a seguir adelante y preparar mi computadora. Para empezar a hacer esto, cerraré algunas de estas aplicaciones que se han abierto. Empezar a compartir mi pantalla. Muy bien, ahí vamos. Este es el sitio web de The Graph. Probablemente ya hayas visto esto. Básicamente, lo que quiero hacer en este video es mostrarte cómo puedes crear una API e implementarla en la nueva interfaz de usuario. El estudio aquí. Luego construye un frente y encima usando Next.js. Eso es lo que vamos a hacer.

Para comenzar, seguiré adelante y crearé en mi terminal una ventana vacía. Para hacer eso, primero necesito aumentar el tamaño de la fuente, porque es muy pequeña. Vamos a aumentar esto a algo así como treinta y tres. Está bien. Estoy en la ventana de mi terminal donde voy a crear un nuevo Subgraph. Creo que si miras el Explorador, que también lanzamos hoy, podrás ver algunas de las aplicaciones. Algunas de las API ya están en la red descentralizada. PoolTogether es muy popular. Uniswap, por supuesto, realiza miles de millones de dólares en transacciones. Así que ya existen aplicaciones bastante importantes. Estos son como nuestros socios de lanzamiento, personas que lanzan hoy. Pero si observa una de estas API, quizás esté familiarizado con algunas de las aplicaciones que impulsan. Muchas de estas son aplicaciones financieras. Para mí, los más interesantes para fines de demostración son en realidad las obras de arte, el material visual. Lo que voy a construir es que un mercado NFT lo visualice. Porque creo que los datos financieros son más difíciles de visualizar. No es interesante para una demostración de interfaz de usuario como esta.

Básicamente, lo que voy a hacer es construir un Subgraph. Entonces vamos al Legacy Explorer y yo voy a Zora. Verá un montón de contratos Zora Smart que se implementaron para Subgraphs. Luego, usando estos datos como el contenido de una URL como esta, puedes ver datos un poco más interesantes. Entonces hago el pedido por identificación y luego sacamos algo de aquí. Cuando tienes cosas como esta, es un poco más interesante, como videos y cosas que realmente puedes mostrar. Esto no se está cargando en este momento. Veamos aquí. Quizás pueda encontrar una imagen. Aquí vamos. Cosas como esas. Eso es lo que vamos a hacer.

Déjame comprobar y ver si hay alguna pregunta que me falta. Yo debería. Volveré y responderé preguntas cuando tenga un momento.

Esto está siendo grabado. Estará disponible en mi Twitch y en mi YouTube más adelante. Lo que básicamente quiero hacer es construir para Zora. Entonces zora.co y este es su sitio web. Tienen un montón de NFT que la gente compra y vende. Esto es para lo que quiero crear una interfaz de usuario. Otro interesante es Fundación. Si vas a Foundation.app, esto también es muy bueno. Sabes que puedes ver la oferta actual, por lo que esta cuesta como cuatro mil dólares o dos Eth. Éste cuesta como cinco mil dólares. Entonces esta Fundación y Zora nos ayudarían a lograr una cantidad decente de acción.

Estoy usando Zora. Zora vuelve a ser un mercado NFT. Vamos a crear un subgrafo y luego crearemos una interfaz de usuario para eso. Para empezar, voy a Subgraph Studio. Continuaré y crearé un nuevo Subgrafo. Esto será Zoralivestream. Y mira, tenemos nuestro Subgraph disponible ahora en Studio. Ahora básicamente podemos crear y escribir el código localmente. Luego, implementaremos esto y lo subiremos aquí al Panel de Studio real. Tenemos algunas instrucciones aquí sobre cómo hacerlo, pero en realidad las mejores instrucciones estarán en el nuevo sitio web. Los nuevos documentos que tenemos. También puedes ir al blog Construyendo Subgraphs con Subgraph Studio. En realidad, esto será esencialmente lo que atravesaremos hoy. De hecho, yo personalmente escribí esta publicación de blog. Esta será la API que estamos construyendo hoy. Debería guiarte por todos los pasos.

Entonces ya hemos creado esto. Ahora tenemos nuestra babosa. El estado es NO DESPLEGADO, lo que significa que no estamos desplegados en este momento. Tenemos nuestra clave de implementación. Tenemos algunas instrucciones de instalación, Graph CLI y cosas así. Esto es lo que vamos a usar. Ahora estamos listos para comenzar a escribir algunos códigos. Ahora que tenemos este lugar aquí, podemos volver a nuestra CLI.

Voy a seguir adelante e instalar la CLI. Creo que esto ya está instalado, supongo. Voy a instalarlo nuevamente y luego, una vez instalado, tenemos el binario. Y podríamos empezar a utilizar The Graph CLI. Mientras se instala, seguiré este tutorial. Esto es esencialmente nuevamente por lo que estoy pasando. Esto le muestra cómo configurarlo. Ya lo dejé pasar. Creé mi Subgraph y ahora estamos aquí donde lo instalamos. Ahora que tenemos The Graph CLI instalado, debería poder ejecutar Graph. Y vea que el binario le brinda instrucciones allí, gráfico: la ayuda le brindará algunos comandos comunes. Lo que queremos hacer es iniciar, por eso queremos inicializar el Subgraph. Básicamente, lo que esto hace es crear todo el texto estándar que necesita para su API. Este será el comando que ejecutaremos Graph Init. Aquí le pasamos un par de banderas. Entonces estamos pasando el nombre del contrato. Esto será lo que llamaremos esta fuente de datos. Y para nosotros, será un token, porque serán activos digitales que utilizarán el estándar OpenZeppelin ERC721, que es un token no fungible. Entonces Token tiene mucho sentido.

Vamos a decir eventos de índice, lo que significa que vamos a mirar dentro de las API o las interfaces binarias de la aplicación, que es un contrato inteligente de Ethereum. Básicamente, una API que puedes usar para interactuar con un contrato. Buscará dentro de la ABI y extraerá los eventos reales que se admiten y creará un código repetitivo localmente para nosotros. Así que esto es sólo una ayuda para escribir un código esencialmente para nosotros basado en los eventos.

También dijimos que queremos usar Subgraph Studio, porque ahora tenemos tanto el servicio alojado como Studio. Studio es lo que utilizarán la mayoría de las aplicaciones futuras, pero aún queremos admitir el servicio anterior. Especificamos el estudio y luego también podemos especificar el contrato inteligente con el que estamos trabajando. Entonces dije que estamos usando Zora. Este número aquí son los contratos inteligentes de Zora. ¿Cómo conseguirías eso? Si vas a la documentación para desarrolladores de Zara, puedes obtenerla allí.

Tenían un enlace a los contratos inteligentes aquí. Aunque, por supuesto, puedes recurrir a Etherscan. Etherscan tiene prácticamente todos los contratos inteligentes enumerados allí. Y puedes encontrarlo de otras maneras, pero yo diría que muchos contratos tienen su dirección pública. Entonces, en este caso, Zora incluso llega a tener un sitio de documentación para desarrolladores. Foundation también hace esto, por lo que Foundation también es genial. Fnd.dev tiene todos sus subgrafos. Incluso tienen su propio Subgraph al que apoyan. Creo que Zora también. Sí, tienen su propio Subgraph. Entonces podrías usar su Subgraph existente, pero básicamente estamos construyendo el nuestro desde cero.

De ahí viene este contrato. Los contratos están justo aquí. Ahora que hemos hecho eso, podemos presionar Enter y esto debería continuar. Para guiarnos por los pasos, solo necesitamos una cosa más: el nombre de Subgraph. Puedo copiar eso del slug aquí mismo, luego todas estas cosas podríamos tomar los valores predeterminados. Entonces esto creará todo ese código repetitivo localmente para nosotros.

Ahora debería poder ingresar a este nuevo directorio y abrir mi editor de texto. Muy bien, genial. Este es nuestro código estándar, literalmente todo lo que realmente necesitas para publicar un Subgraph. Se compone de otras tres partes principales. Si puede comprender estas tres piezas principales, puede crear una API sobre cualquiera de las redes que admitimos. Tienes el esquema.graphql, que es el esquema del gráfico. Podríamos eliminar todo eso por ahora. Tenemos nuestro subgrph.yaml. Este subgrph.yaml es su configuración. De forma predeterminada, se le proporcionan alrededor de treinta y cinco líneas de código, o simplemente serán un poco menos, pero su subgrph.yaml es básicamente casi como la infraestructura del código. Le estamos diciendo al indexador que estamos implementando esta API sobre qué hacer con las fuentes de datos con las que vamos a trabajar. Veremos eso un poco más en un segundo.

Entonces lo último que tienes es tu src/mapping. Estas son plantillas de mapeo. Si alguna vez trabajó con algo como AppSync, o incluso The GraphQL, probablemente trabajó con una plantilla de mapeo en el pasado. Entonces estas simplemente definen... son esencialmente funciones de controlador. Tienes los eventos y quieres manejar esos eventos. En nuestro caso, podríamos tener un evento en el que alguien quiso hacer un token y queremos manejar esos datos. Queremos almacenarlo en nuestra API local, lo almacenaremos y lo pondremos a disposición. Entonces los mapeos. Muchas de estas ideas me transfirieron directamente de los días de GraphQL trabajando en el espacio Web2 en aplicaciones tradicionales y demás. Entonces esas son las cosas principales, su esquema.graphql, su subgraph.yaml y sus asignaciones.

Lo primero con lo que nos ocuparemos es el esquema GraphQL. Voy a copiar y pegar algunas de las entidades de los dos tipos con los que estamos trabajando. Uno es el tipo Token y el otro es el tipo Usuario.

Entonces, si miramos a Zora, verá que tenemos estos NFT y están asociados con la dirección de un usuario. Por eso queremos poder almacenar esa información y también queremos almacenar los metadatos sobre el token en sí. Por eso tenemos estas dos entidades.

Para el token, sólo tenemos todos los metadatos que queremos almacenar. Podemos obtener estos metadatos del evento real con el que vamos a trabajar. O, si realmente quisiéramos, podríamos acudir a un contrato inteligente o fuente de datos independiente y obtener datos para un tipo. O podemos ir directamente al nodo The Graph y obtener datos también.

Si realmente quisiéramos, podríamos ir a un contrato inteligente o fuente de datos independiente y obtener datos para un tipo o podemos ir directamente al nodo The Graph y obtener datos también.

Entonces, en las asignaciones, básicamente puede trabajar con diferentes fuentes de datos que completarán los tipos que se definieron aquí y si alguna vez trabajó con GraphQL.

Probablemente comprenda que un signo de exclamación significa que es un campo obligatorio y, si no es un signo de exclamación, significa que es un campo opcional o que acepta valores NULL, por lo que almacenaremos el ID del token, el URI de contenido, el URI de metadatos, el marcado de hora creado, el creador y el propietario, luego tenemos el tipo de usuario, el usuario básicamente tendrá una relación de uno a muchos, por lo que un usuario tiene muchos tokens que ha creado aquí y luego tiene muchos tokens que ha comprado, por lo que un usuario puede ser un creador o consumidor y la forma en que creamos las relaciones o utilizamos estas directivas.

Y si alguna vez ha usado algo como Amplify y muchas otras instrucciones GraphQL diferentes, es posible que haya visto algo como esto donde tiene una directiva y en este caso estamos diciendo que queremos que este campo creado derive del creador aquí, lo cual es una dirección, por lo que la dirección sería una dirección de billetera y básicamente esto nos dará la capacidad de tener una relación entre el token y el usuario y el usuario y el token en sí o diría la matriz de tokens.

Muy bien, dicho esto, podemos seguir adelante y guardarlo y tenemos nuestro subgraph.yaml, así que aquí vamos a hacer algunos cambios, ya tenemos la dirección, que se configuró cuando creamos esto. Lo siguiente que queremos hacer es configurar startBlock. StarkBlock básicamente le dirá al indexador dónde comenzar a indexar estos datos porque si los implementa tal como está, comenzará desde el bloque génesis de la cadena de bloques, por lo que irá a la primera transacción en Ethereum y avanzará desde allí, lo que lleva mucho tiempo, por lo que lo que básicamente podemos hacer es configurar startBlock para que pueda ir al contrato inteligente.

Veamos aquí. Creo que este es el contrato en sí, entonces, ¿cómo lo encontrará para poder ir a Transacciones? Puede ir a la última transacción y aquí está, así que ese es el primer bloque de inicio que diríamos que es literalmente el bloque que estamos usando aquí.

Ahora, para las entidades, este es el siguiente paso que queremos hacer. Estas coincidirán con las entidades GraphQL, por lo que tenemos un token y un usuario. Lo último que queremos hacer es lidiar con los eventHandlers, los tres eventos que Voy a estar trabajando con Se va a transferir. Este evento se activa cada vez que se crea o se transfiere un token, por lo que si creo un token, este evento se activa. Si lo transfiero a otra persona, este evento se activa de esta manera. es una buena manera de realizar un seguimiento de todos los tokens que existen y luego los otros dos controladores manejarán las actualizaciones, de modo que si cambio el metadataURI, cambio el tokenURI, puedo rastrearlo aquí.

Entonces estos llamarán a funciones que están en nuestras asignaciones llamadas handleTokenMetadataURIUpdated, handleTokenURIUpdated y handleTransfer y eso es todo.

Ahora podemos volver a nuestra CLI, lo que podríamos querer hacer es escribir nuestras asignaciones para poder escribir nuestras asignaciones. En realidad teníamos una biblioteca llamada GraphTS, que es una biblioteca mecanografiada Graph que admitimos junto con CLI usando esta biblioteca. puede hablar directamente con la cadena de bloques, puede hablar con Ethereum, pero también puede hablar con el nodo The Graph si ya ha almacenado algunos datos allí y desea recuperar esos datos, puede hablar con él.

De hecho, utilizamos The Graph CLI para generar gran parte de este código, lo que hace que sea bastante fácil trabajar con él para generar ese código. Todo lo que necesitamos hacer es ejecutar un codegen gráfico. Esto hará una combinación de cosas, analizará nuestro esquema GraphQL y las ABI para el contrato inteligente. Continuará y generará un montón de funciones y tipos para que los usemos, de modo que los tipos se hayan generado correctamente.

Deberíamos poder ir a nuestra carpeta generada y ver algunas cosas que se han generado. Las dos clases que deberíamos tener son token y usuario, así que eso es bueno, no vamos a necesitar actualizar esto ni nada, solo mostrarles lo que hace. Lo siguiente que haremos es abrir las asignaciones.

Voy a seguir adelante y eliminar todo esto. Vamos a seguir adelante e importar el material que queremos usar, así que si voy a la publicación del blog aquí. Este código no está muy bien formateado pero lo formatearé en sólo un segundo. Las primeras cosas que estamos importando provienen de la carpeta token que se encuentra debajo de la carpeta generada, TokenURIUpdatedEvent y TransferEvent son eventos que nos permiten tener seguridad de tipos. El contrato de token al que se hace referencia aquí es Token como TokenContract. Esta es una clase que nos permite interactuar con el contrato inteligente real para que podamos realizar llamadas al contrato inteligente usando este y luego Token y Usuario. Creo que estas son clases que te permiten hablar con el nodo The Graph, por lo que básicamente significa que si almaceno algo como un indexador, quiero recuperar esos datos. Puedo usar estas clases aquí, tenemos tres funciones con las que debemos lidiar, así que handleTokenMetadataURIUpdated, handleTokenURIUpdated handleTransfer, por lo que necesitamos tener básicamente tres funciones de controlador en nuestras asignaciones, por lo que la más grande es handleTransfer, esta es una función que manejará la acuñación o la transferencia de un token, por lo que, entendido esto, debemos manejar un par de casos diferentes aquí.

Necesitamos controlar si el token nunca se ha creado antes y también podemos controlar si ya se ha creado, porque si se está acuñando significa que aún no está allí, si se está transfiriendo a otra persona, significa que está allí, por lo que Lo primero que podemos hacer es básicamente usar el token aquí desde nuestro código generado para mirar primero el nodo existente, por lo que básicamente llamamos a esa base de datos. Si este token existe, devuélvalo. Si no, continuaremos y lo crearemos y luego básicamente configuraremos un montón de metadatos como el creador, el tokenID y creadoAtTimestamp. Luego llamaremos al contrato inteligente en sí porque, en el caso, solo obtenemos ciertos datos, pero podemos volver a llamar al contrato inteligente para obtener otros datos, por lo que lo que necesitamos del contrato inteligente es contentURI y metadataURI, por lo que aquí llamamos al contrato inteligente, agregamos campos adicionales a este objeto aquí

Tenemos un token, vamos agregando el creador, el tokenID y creadoAtTimestamp. También hay otra información de contenido. Luego actualizamos el propietario o configuramos el propietario, tal vez porque podría ser un token nuevo sin propietario y luego lo guardamos en el nodo The Graph. Luego también hacemos lo mismo con el usuario, si el usuario existe, cargamos el usuario y si no, continuamos y creamos para el usuario las dos últimas funciones que necesitamos o para manejar handleTokenURIUpdated y manejar TokenContentURIUpdated para que tokenURIUpdated simplemente busque el token y luego actualiza contentURI y lo guarda. El otro que tenemos es TokenMetadataURIUpdated, por lo que aún no lo tenemos definido, así que seguiré adelante y lo haré.

Sólo voy a copiar cómo será realmente este evento. Github Copilot está trabajando para mí allí, por lo que tenemos este evento tokenMetadataURIUpdated. Queremos configurar ese metadataURI. Creo que estamos bien, así que ahora hemos escrito nuestras asignaciones. Tenemos tres funciones con las que estamos tratando handleTransfer, handleTokenURIUpdated y tokenMetadataURIUpdated y luego tenemos nuestro Subgraph aquí que define esos eventos. Creo que estamos listos para implementar esto.

Entonces, lo que quiero hacer es ir a CLI y ejecutaré la implementación del gráfico y aquí podemos definir el estudio, así que diremos dash dash studio, luego quiero seguir adelante y pasar el nombre del subgrafo, que es aquí mismo.

Le daré una etiqueta de una versión de punto cero 1, y oh, necesito seguir adelante, y primero déjame seguir adelante y graficar auth dash dash studio. Puedo obtener mi clave de implementación aquí mismo, está bien, así que debería implementarse. Entonces, si esto se ve bien, entonces deberíamos estar listos para volver a nuestro panel aquí y, como puede ver, ya se actualizó con el área de juegos GraphQL. Y ahora podemos seguir adelante y comenzar a ejecutar algunas consultas, y luego transferiremos esto a nuestra próxima aplicación JS. Entonces, podríamos pasar algunos argumentos como orderDirection, descendente y luego tal vez orderBy createAtTimestamp, y luego comenzaremos a ver que algunos datos están regresando. Si miramos el contentURI, vemos que tenemos el contentURI real que regresa, para el contenido que regresa. Muy bien, nuestro subgrafo ha sido implementado. Si queremos saber cómo consultar esto desde nuestra interfaz, podemos ir aquí para obtener más detalles y tenemos nuestra URL de consulta, así que puedo copiar esto. Podría ir a algo así como un contenedor de GraphQL. Creo que es.

Puede ver que también podemos usar este contenedor de GraphQL o cualquiera de estas diferentes UI de GraphQL. Entonces nuestra API está funcionando. Esa es la URL que vamos a utilizar. Ahora podemos seguir adelante y saltar a una aplicación front-end. Entonces, lo que quiero hacer es crear una nueva aplicación JS. Llamaremos a esto como Zora UI. Supongo que eso debería aparecer aquí, y lo que queremos hacer es construir una interfaz de usuario sobre esta API, así que lo que voy a hacer es usar el viento de cola, porque el viento de cola es bastante bueno. Y voy a seguir adelante e instalar las cosas que necesito para Tailwind, luego inicializaré el proyecto Tailwind y luego entraremos en globals.css y seguiremos adelante y haremos eso. .

Y ahora estamos listos para partir. Entonces, en la interfaz de usuario, probablemente iré a index.js, y aquí es donde haremos nuestro trabajo. Continúe y elimine todo este código aquí, y las cosas que necesitaré serán useState y useEffect de reaccionar. Y probablemente también necesite algún código al que pueda hacer referencia aquí. No quiero que me gusten las referencias directamente, pero sí quiero usarlas para comenzar. Entonces tenemos getServerSideProps. Aquí será donde llamaremos a nuestra función fetchData, y fetchData llamará a nuestra API GraphQL, y luego entrará aquí como accesorios, y luego simplemente consolaremos.log así y tal vez no lo hagamos. Incluso necesitamos useState porque lo usaremos el próximo año, así que podemos pasarlo todo en estos accesorios. Así que aquí es donde vamos a empezar.

Entonces, lo que quiero hacer es cómo llamamos realmente a la API GraphQL. Bueno, ya sabes, tenemos nuestra opinión aquí en nuestros documentos. También tenemos alguna documentación disponible. Ya sabes, diferentes clientes GraphQL, por lo que puedes usar algo como Apollo, o puedes usar algo como URQL. Creo que optaré por URQL solo porque tiene un poco menos de código. Así que voy a seguir adelante e instalar URQL y GraphQL, así que tenemos URQL y GraphQL instalados ahora, y lo que quiero hacer es básicamente decir copiar todo este código, y luego vamos a dividirlo. en nuestra aplicación. Entonces tenemos createClient desde urql. Tenemos nuestra URL de API, la URL de API con la que queremos trabajar será esta API. Esta es la URL en la que estoy. Para la consulta, solo queremos usar una consulta que sabemos que va a funcionar. Entonces volvemos a mi API y simplemente escribimos una consulta, luego la copio y la pego, y también diremos que queremos obtener los primeros 10.

Entonces esa es nuestra consulta. Este será nuestro cliente. Más o menos decimos crear cliente. Configuramos la URL y luego podemos llamarla para obtener los datos, así que sigamos adelante y hagamos esto, y luego consolamos esos datos de registro. Simplemente regresaremos como una matriz vacía. Muy bien, muy bien, ya tenemos nuestra funcionalidad básica lista para funcionar. Podemos seguir adelante y ejecutar esto. Parece que tengo que detener otro servidor que tengo en ejecución, localhost 3000, y cuando esto se ejecute, creo que deberíamos ver esto desconectado aquí. Así que ahí vamos, ahí lo tenemos. Tenemos nuestros datos allí, por lo que tenemos data.data.tokens. Entonces podría decir devolver data.data.tokens y luego, en nuestra interfaz de usuario, vemos que tenemos nuestros tokens que deberían aparecer. Muy bien, ahí vamos. Entonces tenemos nuestras 10 fichas.

Tenemos nuestro contentURI. Tenemos nuestro metadataURI. El metadataURI tiene cosas como esta donde tienes el tipo mime, el nombre, la versión, la descripción, cosas así que puedes usar en tu interfaz de usuario. Eso es genial. Entonces tenemos toda la funcionalidad básica. Ahora sólo necesitamos construir algún diseño en él. Entonces, para las cuestiones de diseño y, en realidad, otra cosa que podríamos tener que considerar es como mapear los datos en sí, debido a la forma en que regresan. Es posible que queramos cambiarlo un poco, así que, por ejemplo, una cosa que no sabemos es que directamente de estos datos hay cosas como mimeType, así que para obtener el mimeType que nos permitirá Para mostrar eso, en realidad tenemos que llamar a una búsqueda, llamar a un axios o algunos tipos de solicitud HTTP para obtener estos datos JSON. Y de esa manera, podemos saber si es una imagen, un video o un gif, ¿cómo vamos a mostrarlo?

También queremos estos datos, estos metadatos de todos modos. Entonces, lo que podemos hacer básicamente es tener una función aquí que mapee estos datos. Entonces, lo que vamos a hacer es decir algo como data.data.tokens.map, y luego vamos a hacer una especie de mapa sobre todo, y luego llamaremos a fetch para escribir. de obtener esos metadatos ahora. Afortunadamente, ya creé una función que hace esto. De esa manera, no tiene por qué gustarnos pasar por todo eso. Voy a ir a mi GitHub. Tengo esta función de buscar datos. Simplemente voy a reemplazar eso con esto. Quizás elimine parte del archivo console.log. Está bien, genial. Entonces, esta función básicamente asignará todos los tokens y llamaremos para recuperar los metadatos, y luego actualizaremos el tipo según los metadatos.

Entonces, si es mp4, queremos mostrar un video. Si es audio, queremos mostrar audio. Si es una imagen, queremos mostrar la imagen y luego, una vez que tengamos esos nuevos metadatos actualizados, o actualicemos, a menos que hayamos roto algo aquí, deberíamos ver esos metadatos. Creo que voy a actualizar la consulta para devolver solo la primera por ahora. Ahora voy a reiniciar el servidor. Muy bien, aquí están nuestros tokens, tenemos nuestros metadatos, tenemos nuestra descripción, tenemos nuestro tipo mime, tenemos nuestro nombre y tenemos la versión.

Lo último que queremos hacer es desarrollar el estilo real usando viento de cola y también tener una interfaz de usuario de ejemplo para eso que vamos a usar. Así que voy a seguir adelante y copiar esto, twittearé y haré que todo esto esté disponible, y probablemente lo pondré en los comentarios también, pero el código para esto, pero no es nada demasiado sofisticado. Es simplemente una especie de CSS básico que usa viento de cola, pero lo que vamos a hacer es esto: tenemos nuestros accesorios, tenemos nuestros tokens, así que si actualizamos, ahora vemos que tenemos nuestra interfaz de usuario aquí y lo que podría hacer. Ahora, en lugar de devolver uno, sigamos adelante y aumentemos eso a 10. Oh, eso es feo. Oh, creo que sé lo que me estoy perdiendo, extrañando esto. Aquí vamos. Ahora nuestra interfaz de usuario muestra, ya sabes, todos los diferentes NFT, y no debo haber tomado en consideración algún tipo de tipo mime, así que veamos qué tipo de mime es, o simplemente puede que no se esté cargando por cualquier motivo.

Parece que podría haberlo. Bien, parece que este se está cargando. Entonces parece que esto es audio. No estoy seguro de por qué el audio no funciona, pero puedo investigarlo, pero esa es una especie de demostración que solo queríamos mostrarte cómo desarrollarla, y creo que lo interesante que podrías hacer en este punto, si eres desarrollador y estás dispuesto a ganar dinero con una de tus API, creo que esto es, nuevamente, el poder de tener una aplicación autónoma que está disponible y que la gente puede Básicamente, pueden competir entre sí en función de la calidad para crear las API diferentes más valiosas y, de hecho, pueden publicar esto en la red y comenzar a ganar tarifas de consulta. Entonces, si publicas esto, cualquiera que quiera usarlo podrá usarlo y, según el uso, ganarás dinero. Ni siquiera tienes que hacer nada. Simplemente lo publicas, y luego, si la gente lo usa, básicamente ganarás una parte del dinero con el uso, y esto se hace escribiendo tu información y tu transacción de la publicación en la cadena de bloques.

Esto es bastante interesante, porque básicamente estás publicando y una vez que está ahí, siempre está ahí, y ya sabes, eso para mí es bastante poderoso, y si quieres hacer eso, básicamente necesitarías tener algunos tokens, así que Tengo algunos tokens y básicamente puedo publicar en Rinkeby o en la red principal. Entonces puedo ir aquí a Rinkeby, y aquí tengo algunas pruebas, seguir adelante y publicar esto, seleccionar la red Rinkeby y probablemente necesite hacer algo con mi permiso y desconectarme de todas estas cuentas diferentes, y luego volver a conectarme. Intentamos esto una vez más. Parece que tengo algunos problemas para publicar. Tendré que investigar qué está pasando con eso. Parece que sí. Muestra que no tengo ética por alguna razón, pero ese no es el caso. Oh, creo que puedo saber lo que tengo que hacer. Déjame seguir adelante, desconectarme y luego conectarme nuevamente. Entonces creo que me autenticaron con la billetera equivocada, así que después de que esto se publique, aparecerá en la red y puedo probarlo porque esta es la red de prueba de Rinkeby, pero si publicas esto en la red principal, eso es cuando las personas básicamente comenzarían a pagar si lo usan.

Así que dejaré de compartir mi pantalla y básicamente comenzaré a ver si alguien tiene alguna pregunta o algo así.

Esta entrevista fue muy fructífera gracias a Nader Dabit de The Graph, un proyecto que resuelve este problema con un servicio alojado que indexa datos blockchain. Estos índices ("subgrafos") se pueden consultar utilizando la API GraphQL estándar. En términos simples, los subgrafos son como índices de datos escritos por desarrolladores para una lógica de negocios específica, y una vez que se implementa la lógica de negocios, seguirá actualizando la base de datos correspondiente según la implementación para que a los desarrolladores les resulte más fácil extraerlos y llamarlos en cualquier momento. . Continuaremos invitando a más invitados a participar, ya sea en forma de entrevistas, talleres o de cualquier otra forma, esperamos brindar más inspiración a aquellos que estén interesados ​​en explorar Layer2 en profundidad, ¡y hacer todo lo posible para lograrlo!

- FIN

nader dabit Actualmente trabaja en Edge y Node para ayudar a construir un futuro descentralizado. Anteriormente dirigió la defensa de los desarrolladores de front-end web y móviles en Amazon Web Services; centrado en GraphQL, desarrollo de aplicaciones web y móviles multiplataforma y habilitado para la nube. Desarrolló aplicaciones y arquitecturas de referencia en AWS utilizando una combinación de GraphQL y tecnologías sin servidor.

A continuación, tendremos proyectos de Polygon, Aztec y otros que nos brindarán una experiencia sólida y excelentes conocimientos. Próximamente se anunciarán más talleres. ¡Manténganse al tanto!

Polígono

• Tema: Escalar tus Dapps usando Polygon
• Hora: 2021.7.20

👀 Vive aquí:http://live.bilibili.com/23288126

Azteca

• Tema：Por determinar
• Tiempo: pendiente

👀 Vive aquí:http://live.bilibili.com/23288126

Fuente: https://iosgvc.medium.com/the-graph-featured-building-on-ethereum-with-graphql-the-graph-and-next-js-b19be457b71f?source=rss——-8——— ——–criptomoneda