Búsqueda Semántica a través de la Wikipedia Completa con la API de GraphQL de Weaviate

Rate this content
Bookmark

Weaviate utiliza GraphQL para proporcionar una interacción de datos fácil de usar. Weaviate es un motor de búsqueda de vectores de código abierto, y todas las búsquedas (por ejemplo, semánticas, contextuales) se realizan a través de su API de GraphQL. Hemos pensado mucho en el diseño de la API de GraphQL, lo que resulta en una buena experiencia para el usuario y el desarrollador. En esta charla, te llevaré en el viaje de cómo se formó nuestra implementación de GraphQL según las necesidades de los usuarios y los requisitos de software, y mostraré una demostración del diseño actual de Weaviate. La demostración mostrará cómo el diseño de GraphQL de Weaviate permite la búsqueda semántica (vectorial) en combinación con la búsqueda escalar a través de datos no estructurados. Se utilizan modelos de aprendizaje automático en segundo plano, pero con el diseño actual de GraphQL, los usuarios sin conocimientos técnicos pueden consultar fácilmente la base de datos de vectores.


Weaviate tiene una arquitectura modular, por lo que los usuarios pueden conectar varios modelos de aprendizaje automático en la parte superior de la base de datos de vectores. Ejemplos son el módulo de Preguntas y Respuestas recién lanzado y el módulo de Reconocimiento de Entidades Nombradas. Los módulos pueden ampliar el esquema de GraphQL de forma dinámica, para consultar las nuevas características de manera intuitiva.

Esta presentación contiene una demostración donde consultaremos la Wikipedia completa, realizaremos consultas de búsqueda semántica y más. Todo a través de la API de GraphQL de Weaviate. No se requieren conocimientos previos.

17 min
10 Dec, 2021

Video Summary and Transcription

Weaviate es una base de datos y motor de búsqueda que utiliza una API de GraphQL. Admite varios modelos de aprendizaje automático para la vectorización y búsqueda de datos. Las funciones principales de Weaviate son obtener, explorar y agregar, lo que permite a los usuarios consultar y buscar en el conjunto de datos. Weaviate proporciona resultados rápidos y precisos, lo que permite a los usuarios encontrar cualquier cosa en el conjunto de datos. La API de GraphQL en Weaviate se puede utilizar para consultar datos específicos y establecer relaciones de gráficos.

Available in English

1. Introducción a Weaviate y Motores de Búsqueda Vectorial

Short description:

Hablaremos sobre nuestra base de datos, el motor de búsqueda Weaviate y su API de GraphQL. Utilizaremos un conjunto de datos de demostración, la Wikipedia completa, para mostrar cómo hacer consultas. Proporcionaremos contexto sobre los motores de búsqueda vectorial, discutiremos el diseño de la API de GraphQL y haremos una demostración de la API en el conjunto de datos. Por último, te mostraremos cómo iniciar Weaviate con su API de GraphQL.

Hola a todos. Gracias por tomarse el tiempo para escuchar esta charla. Vamos a hablar sobre algunas cosas. Primero que nada, vamos a hablar sobre nuestra database, nuestro motor de búsqueda Weaviate, y vamos a utilizar un conjunto de datos de demostración, que es la Wikipedia completa, para mostrar cómo puedes hacer consultas, y lo más importante, por supuesto, vamos a hablar sobre la API de GraphQL que tiene.

Weaviate es un motor de búsqueda vectorial o database, tiene una API de GraphQL, y vamos a utilizar para demostrarte el conjunto de datos de demostración de la Wikipedia completa. Primero daré un poco de contexto sobre qué es un motor de búsqueda vectorial, para que entiendas de qué estamos hablando, si es algo nuevo para ti. Luego veremos el design de la API de GraphQL. Después haremos una demostración de la API en el conjunto de datos. Y por último, te mostraré cómo puedes iniciarlo con Weaviate y su API de GraphQL tú mismo.

Nuevamente, gracias por escuchar. Primero que nada, ¿qué es Weaviate y qué es un motor de búsqueda vectorial? En el núcleo, estamos tratando con el problema de los datos no estructurados. Si alguna vez has utilizado una database o un motor de búsqueda, sabrás que los datos que estás almacenando, por ejemplo, si son texto, solo puedes encontrarlos si utilizas palabras clave. Por ejemplo, en un motor de búsqueda tradicional, si buscas este objeto de datos para vino, para mariscos, probablemente no lo encontrarás porque excepto por la clave aquí, no hay ninguna parte donde encuentres la palabra vino en los datos. La palabra para no está ahí tampoco y los mariscos tampoco están ahí. Pero utilizando un motor de búsqueda vectorial y buscando vino para mariscos, en realidad encontraría el objeto de datos. Y la razón por la que puede hacer eso es porque cada objeto de datos que agregas a el motor de búsqueda se pasa por un modelo de machine learning. El modelo de machine learning crea representaciones vectoriales y eso es lo que utilizas para buscar en la database.

Ahora, si esto es nuevo para ti, déjame darte un poco de contexto para que sepas qué está sucediendo. La mayoría de los modelos de machine learning generan vectores. Y la forma más fácil de pensar en los vectores son las coordenadas. Por ejemplo, nuestro primer modelo tenía 300 dimensiones y tenías todo tipo de palabras allí. Entonces, los bulbos aquí representan palabras como carne, pollo, pescado, etc. Lo que puedes hacer si agregas un nuevo objeto de datos, por ejemplo, el Chardonnay que es bueno con es que todas estas palabras individuales que ves aquí resaltadas en verde se encuentran en el espacio vectorial y se colocan en ese mismo espacio vectorial. Y lo que puedes hacer es darle una posición única de centroide a ese objeto de datos. Entonces, ahora puedes decir que en el espacio vectorial el objeto de datos, en este caso el Chardonnay, se encuentra exactamente aquí en el medio de donde se encuentran todas estas palabras. Ahora, si buscas vino relacionado con mariscos o cosas así, en realidad podrás encontrar ese objeto de datos. No es una coincidencia del 100%, pero es una aproximación de lo que estás buscando. Pero en un momento verás cuál es el valor real de esto. Como puedes ver aquí, tenemos la clase Vino con la propiedad Covey run 2005 Chardonnay. Puede estar relacionado con un beacon y puede tener ciertos pesos vectoriales.

2. Estructura del Objeto de Datos y Diseño de la API de GraphQL

Short description:

Discutiremos la estructura del objeto de datos en Weaviate y el papel de la base de datos en el almacenamiento de objetos para la búsqueda y filtrado vectorial. Weaviate admite varios modelos de aprendizaje automático para la vectorización y búsqueda de datos. La arquitectura incluye módulos como text-to-vec y Q&A, que se ejecutan en tu infraestructura. El núcleo de Weaviate contiene estos módulos, junto con una capa de persistencia para almacenar vectores y una API para la búsqueda de datos. Nos centraremos en la API de GraphQL y su diseño, que elegimos en lugar de otras opciones. El diseño involucra clases, propiedades y modelos de datos similares a un grafo con propiedades adicionales para la búsqueda.

Así es como se ve el objeto de datos cuando lo almacenas en una instancia de Weaviate. Para ayudarte a trabajar con esto, tenemos la base de datos que ves en el medio para almacenar tus objetos y realizar búsquedas y filtrado vectorial. Pero, por supuesto, hay muchos, muchos modelos de aprendizaje automático que puedes usar para vectorizar los datos o buscar a través de ellos.

La demostración que voy a hacer hoy se centra exclusivamente en texto. Sin embargo, también puedes hacer esto con imágenes, videos o cualquier otro tipo de datos. Si profundizas un poco más, verás cómo funciona desde un punto de vista arquitectónico. Por ejemplo, tenemos módulos de text-to-vec o módulos de Q&A. A menudo se ejecutan en una GPU. Todo esto se ejecuta en tu infraestructura.

Estos módulos se encuentran en el núcleo de Weaviate, luego hay una capa de persistencia que se encarga de almacenar los vectores, de poder buscar a través de ellos y de almacenar el objeto de datos. Pero lo más importante, hay una API encima de todo esto. Por supuesto, nos centraremos en la API de GraphQL y cómo puedes aprovecharla para buscar en tus datos.

Antes de hacer eso, quiero hablar un poco sobre el diseño de la API de GraphQL, porque cuando creamos la base de datos, aún no teníamos una interfaz. Tuvimos que elegir qué lenguaje usaríamos para consultar los datos. ¿Tendríamos una API puramente RESTful? ¿Adoptaríamos algún tipo de lenguaje de consulta? ¿Inventaríamos algo propio? Luego decidimos que lo mejor para nosotros era usar GraphQL. Esto es, en pocas palabras, nuestro diseño. En la parte superior, tienes una función principal dentro de UEFI 8. Lo veremos en un momento. Tienes una clase a la que puedes agregar y agregar tus datos. Una clase puede ser cualquier cosa. Cualquier dato que tengas, por ejemplo, si tienes documentos, puedes tener una clase documento. Si tienes productos, puedes tener una clase producto. Luego tienes las propiedades. Una propiedad también puede ser cualquier cosa. Por ejemplo, si nos quedamos con la clase producto, podrías tener la propiedad nombre o la propiedad precio. También puedes hacer una referencia cruzada. Por lo tanto, es un modelo de datos similar a un grafo. Luego tenemos estas propiedades adicionales con guión bajo. Esas son propiedades que obtienes como parte de la búsqueda de clases. Pero están integradas en los módulos o en Weave8 mismo.

3. Funciones principales y consulta de datos en Weaviate

Short description:

Tenemos tres funciones principales: obtener, explorar y agregar. Obtener se utiliza para encontrar datos en el conjunto de datos. Explorar se utiliza para buscar en el espacio vectorial completo. Agregar se utiliza para realizar operaciones como contar objetos de datos. Podemos agregar filtros de búsqueda al nombre de la clase, como filtros de texto cercano de los módulos de texto a vectores. Utilizaremos el conjunto de datos de Wikipedia en nuestra demostración, que contiene millones de artículos, párrafos y referencias cruzadas. Comencemos con un ejemplo sencillo de consulta de párrafos con títulos, contenido y orden.

Entonces, tenemos tres funciones principales. Así que obtener, explorar y agregar. Obtener es la que utilizaremos más, porque así es como encontramos cosas en nuestro conjunto de datos. Explorar es buscar en el espacio vectorial completo. Esto se hace a menudo si no sabes cómo se llaman tus clases o propiedades. Y agregar es simplemente, por ejemplo, cuántos objetos de datos tengo, etc.

Entonces, por supuesto, lo que también puedes hacer es que para el nombre de la clase, puedes agregar filtros de búsqueda. Aquí, por ejemplo, si tienes la clase artículo, la propiedad título, puedes agregar un filtro de texto cercano que proviene de los módulos de texto a vectores, y dices algo como, okay, quiero buscar el concepto. Los conceptos, en este caso, precios de vivienda. Así es como es la estructura de GraphQL en Weave 8. Y creo que es mejor comenzar a ver la demostración porque ¿qué es mejor que verlo en acción?

Para todos los conjuntos de datos de demostración que tenemos, tienes una consola a la que puedes acceder a través de console.dot alguna otra tecnología, y en esa consola se encuentra, entre otras cosas, GraphQL. Eso es algo que utilizaremos aquí. Por supuesto, es una base de datos. Así que necesito seleccionar una base de datos, un conjunto de datos. Y el conjunto de datos que está aquí es en realidad Wikipedia. Esto es de código abierto. Está en GitHub. Y actualmente contiene un poco más de 11 millones de artículos, un poco más de 27 millones de párrafos y un poco más de 125 millones de referencias cruzadas. Y esta es la máquina en la que se está ejecutando. En este repositorio de GitHub, encontrarás toda la información si quieres ejecutar el conjunto de datos tú mismo. Pero también tenemos una demostración en vivo que puedes usar.

Así que empecemos muy simple primero. Puedo decir obtener. Puedo decir párrafo. Y puedo decir título, contenido y orden. Y la razón por la que lo estructuramos así es porque un párrafo es parte de un artículo en Wikipedia. Y un párrafo puede tener un título. No tiene que tenerlo. Tiene contenido y tiene un orden.

4. Consulta de datos y modelos de aprendizaje automático

Short description:

Podemos consultar el objeto de datos y recuperar su representación vectorial. También podemos establecer relaciones de grafo y buscar en el conjunto de datos utilizando GraphQL. Comencemos haciendo una pregunta y limitando la búsqueda al primer resultado. Esta consulta tiene como objetivo encontrar la respuesta a la pregunta de cuántas personas caben en un Airbus A380.

Entonces, es como, por ejemplo, el cuarto párrafo. Ahora, si ejecuto esta consulta, una consulta muy aburrida, dice algo así como dame los primeros 25 párrafos y muéstrame el título, contenido y orden. Ahora, si limitamos esto, oh, disculpas. Si lo limitamos al primer resultado, puedo hacer algo como esto. Así que puedo decir limitar uno, primer resultado. Y lo interesante será cómo el modelo de aprendizaje automático representa este objeto de datos. Entonces, lo que estoy haciendo ahora con esta propiedad adicional es que quiero ver el vector para este objeto de datos específico. Si lo ejecuto aquí, devuelve el vector. Una representación que proviene del modelo de aprendizaje automático. Entonces, este objeto de datos se ejecuta a través del modelo de aprendizaje automático. Esta es la representación vectorial que nos da y representa esto. Ahora, si retrocedemos un paso, simplemente elimino la representación vectorial. También podemos hacer una relación de grafo. Así que podemos decir en el artículo. Puedo decir en el artículo, un artículo como título. Y ahora, si lo ejecuto, puedes ver de dónde viene. Viene de un archivo en Wikipedia. Así es como se estructura el datos. O perdón, cómo se estructura la API de GraphQL. Pero, por supuesto, donde se vuelve muy interesante es ahora si vas a usar GraphQL para habilitar los modelos de aprendizaje automático para buscar en el conjunto de datos. Así que hagamos algo como esto. Comencemos desde la perspectiva de hacer una pregunta. Así que puedo decir hacer pregunta. Y podría decir cuántas personas caben en un Airbus A380. Le diré que quiero encontrar la respuesta en el contenido. Así es el contenido. Y voy a limitarlo solo al primer resultado, porque estoy buscando una respuesta específica a una pregunta. Y luego, nuevamente, puedo agregar la propiedad adicional para mostrarme la respuesta. Sí, necesito resultado. Esta consulta dice buscar a través de los párrafos, intentar responder la pregunta, ¿cuántas personas caben en un Airbus A380? Usar la propiedad de contenido para encontrarlo, limitarlo al primer resultado.

5. Resultados de consulta en Weaviate y preguntas genéricas

Short description:

Aquí demostramos los resultados de una consulta en Weaviate, mostrando el título, contenido, orden y origen de un párrafo. La consulta es rápida y precisa, lo que permite a los usuarios encontrar cualquier cosa en Wikipedia. También podemos usar Weaviate para preguntas genéricas y buscar conceptos como la comida italiana. Los resultados proporcionan un alto nivel de certeza, pero pueden variar a medida que nos alejamos del tema principal.

Muéstrame el resultado de la respuesta. También quiero ver el título del párrafo, el contenido del propio párrafo, el orden en que se muestra este párrafo en la página. Y quiero ver la página real de Wikipedia de donde proviene esto. Así que ahora ejecutando la consulta, y puedes ver lo rápido que fue. Dice algo como 656. Y luego ves aquí en el lanzamiento en diciembre de 2006, asiento A380 de 156, 200, etc. Así es como ves cómo funciona y cómo obtiene estos resultados. Puedes encontrar cualquier cosa.

Así que cualquier cosa que esté en Wikipedia se puede buscar. Soy un gran fanático de la música, así que podría decir, por ejemplo, ¿cuál fue el nombre de la primera banda de Frank Zappa? Así que el mismo tipo de consulta. Mantengamos todo igual aquí. Ejecutemos esta consulta. Y aquí ves que es The Mothers of Invention, que resulta ser la respuesta correcta. Lo sé. No solo podemos hacer eso para preguntas y respuestas, sino que también podemos hacerlo para preguntas más genéricas.

Así que ahora eliminemos el ask y el limit y digamos near text. Quiero buscar los conceptos, y vamos, por ejemplo, comida italiana. No, no tengo una respuesta, pero puedo pedir certeza. OK, veamos qué sucede cuando ejecutamos esta consulta. Lo que ves aquí es... bueno, por supuesto, proviene del artículo lista de platos italianos, eso tiene sentido. Es el primer párrafo, así que no hay texto. Y aquí ves todo tipo de cosas sobre platos italianos. Y es casi un 90% seguro de que este es el resultado correcto. Pero si nos desplazamos hacia abajo, ves que el número disminuye ligeramente. Aún se trata de la cocina italiana. Pero cuanto más bajamos, ves que nos alejamos más del tema real. Así que aquí está la cultura de Italia, la cocina.

6. Consulta de datos y niveles de certeza

Short description:

Podemos especificar un nivel mínimo de certeza para los resultados de la consulta. Cuanto más bajemos, menos relevantes serán los resultados. Podemos utilizar cualquier consulta en lenguaje natural y cualquier conjunto de datos para la búsqueda.

Pasta, por supuesto, pasta. Entonces una de las cosas que podríamos hacer, por ejemplo, es decir, que queremos tener al menos un 85% de certeza en el resultado. Así que si ejecuto esta consulta de nuevo, y déjame desplazarme hasta abajo del todo. Entonces veamos qué hay. Aquí vemos la cocina lombarda de Milán, que tiene un 85% de certeza. Así que lo que ves, sigue siendo sobre comida italiana. Pero cuanto más bajamos, más nos alejamos de la consulta real que tenemos. Y puedes utilizar cualquier consulta en lenguaje natural que desees utilizar. Es importante mencionar que este conjunto de datos de demostración es Wikipedia. Pero puedes utilizar cualquier conjunto de datos que tengas.

7. Consulta de comida italiana y documentación

Short description:

Ahora demostraré cómo consultar comida italiana de la lista de platos italianos utilizando relaciones de grafo. Al ejecutar la consulta, podrás ver los enlaces a artículos relacionados. Así es como funciona la API de GraphQL de Weaviate. Para obtener más información, visita nuestro sitio web o busca Weaviate. Gracias por escuchar y considera probar Weaviate.

Lo último que quiero mostrar está relacionado con las relaciones de grafo. Así que vamos a limitarlo al primer resultado. Ahora voy a obtener comida italiana de la lista de platos italianos. Incluso puedo decir en artículo, en título de artículo, puedo decir tiene... Oh, no. Lo siento. Enlaces a artículo en artículo. Y puedo decir título de nuevo. Entonces lo que hace esta consulta es encontrar el objeto data para el párrafo. En este caso, ese es el primer párrafo de la lista de platos italianos, que es la primera relación de grafo. Y luego vamos a hacer otra relación de grafo donde vamos a decir, OK, muéstrame qué objetos data está enlazando a su vez. Así que ejecutemos esa consulta y veamos qué sucede. Si ahora te desplazas hacia abajo, verás que los enlaces al artículo son pizza margherita, DOC, cocina italiana, etc., etc., etc., etc.

Así es como funciona la API de GraphQL del motor de búsqueda vectorial Weaviate. Pero lo que me gustaría hacer es presentarte la documentación. Lo más fácil que puedes hacer es buscar Weaviate en Google o ir a nuestro sitio web, SAMI.Technology. Haces clic en la sección de Desarrolladores y no puedes perdértelo. En la guía de instalación, puedes hacer clic, por ejemplo, en Personaliza tu configuración de Weaviate. Puedes ir al personalizador e instalarlo tú mismo. Por supuesto, por último pero no menos importante, tenemos las referencias de GraphQL. Así que si te desplazas allí, verás ejemplos de consultas. Puedes probarlas en tiempo real, y también verás el equivalente de estas consultas GraphQL en diferentes lenguajes de programación.

Así que, muchas gracias por escuchar mi charla. Espero que te guste. Espero que pruebes Weaviate. Si visitas nuestro sitio web, encontrarás nuestro slack. Encontrarás la documentación del software. Weaviate en sí está en GitHub. Si te gusta lo que ves, entonces, por supuesto, siempre se agradece una estrella en GitHub. Y también puedes, por supuesto, buscar Weaviate en Google, y encontrarás otros videos, publicaciones de blog, documentación de software, conjuntos de datos de demostración, lo que se te ocurra. Muchas gracias por escuchar, y espero que también disfrutes de las otras charlas. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.