Compatibilidad Parse Server 3.10+ con Relay y GraphQL

compatibilidad con relay introducción la api graphql de parse server sigue los últimos estándares actualmente disponibles para apis altamente escalables y proyectos ambiciosos de front end el equipo de código abierto de parse elige seguir la especificación de relay https //relay dev/docs/en/graphql server specification relay es un marco de javascript para construir aplicaciones react impulsadas por datos, alimentadas por graphql, diseñado desde cero para ser fácil de usar, extensible y, sobre todo, eficiente relay logra esto con consultas estáticas y generación de código anticipada a partir de parse 3 10, se implementa la compatibilidad total con relay https //relay dev/docs/en/graphql server specification este documento te guiará a través de esas implementaciones requisitos previos para comenzar con este tutorial, necesitarás una aplicación creada en back4app consulta el tutorial crear nueva aplicación https //www back4app com/docs/get started/new parse app para aprender cómo crear una aplicación en back4app 1 crea una nueva aplicación en back4app primero que nada, es necesario asegurarse de que tienes una aplicación existente creada en back4app sin embargo, si eres un nuevo usuario, puedes consultar este tutorial https //www back4app com/docs/get started/new parse app para aprender cómo crear una 2 crea algunas clases en tu nueva aplicación creada, ve al \<font color="#2166ae">navegador de base de datos\</font> y haz clic en el \<font color="#2166ae">crear una clase\</font> botón elige crear una \<font color="#2166ae">clase personalizada\</font> y dale un nombre siguiendo el esquema de ejemplo de relay https //relay dev/docs/en/graphql server specification#schema , creé las clases facción, nave, y otras como se describe con propiedades coincidentes, pero puedes crear tus clases para seguir esta documentación solo cambia tus consultas y mutaciones en consecuencia recuerda que por convención las clases comienzan con una letra mayúscula, son camelcase, y no contienen caracteres especiales como espacios y símbolos haz clic en \<font color="#2166ae">crear clase\</font> cuando hayas terminado 3 consola de graphql con tus clases y propiedades creadas, puedes ir a la \<font color="#2166ae">consola de api\</font> y luego a la \<font color="#2166ae">consola de graphql\</font> para ejecutar tus consultas y mutaciones 4 consultas nuestra primera consulta recuperará un objeto basado en su \<font color="#2166ae">objectid\</font> (no confundir con \<font color="#2166ae">id\</font> ) parse ha evolucionado y ahora las consultas soportan tanto \<font color="#2166ae">objectid\</font> , anteriormente conocido como \<font color="#2166ae">id\</font> en versiones anteriores, pero ahora también soporta \<font color="#2166ae">global id\</font> , conocido como \<font color="#2166ae">id\</font> , que se refiere al id global de relay y tiene un formato más largo ya que contiene el nombre de la clase encriptado en él ejemplo de \<font color="#2166ae">objectid\</font> eat0ddk09v ejemplo de \<font color="#2166ae"> id\</font> (también conocido como id global) rmfjdglvbjpfyvqwzerrmdl2 hagamos nuestra primera consulta recuperando un objeto por su \<font color="#2166ae">objectid\</font> 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } eso producirá 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } ahora, cambiemos eso por el globalid para relay 1 query rebelsquery { 2 faction(id "rmfjdglvbjpfyvqwzerrmdl2") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } y nota que el resultado será el mismo 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } esto sucede porque el \<font color="#2166ae">id global\</font> funciona, como su nombre implica, globalmente, y tiene el nombre de clase encriptado en él, por lo que parse sabe dónde buscar ese id 5 volver a obtener también con el \<font color="#2166ae">id global\</font> puedes prefetch como la especificación de relay https //relay dev/docs/en/graphql server specification#object identification de la siguiente manera 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } lo que resultará en 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 conexiones las conexiones de relay https //relay dev/docs/en/graphql server specification#connections funcionan de la misma manera en parse con graphql, así que, si necesitas recuperar las naves de los rebeldes 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } lo que resultará en 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "node" { 10 "name" "y wing" 11 } 12 }, 13 { 14 "node" { 15 "name" "x wing" 16 } 17 } 18 ] 19 } 20 } 21 } 22 } también puedes recuperar las naves nth 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1){ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } resultando en 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 cursor 10 "node" { 11 "name" "y wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } o recuperar la n ésima nave después de una específica, usando su valor de cursor 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships(first 1 after "yxjyyxljb25uzwn0aw9uoja"){ #cursor for the y wing ship 6 edges{ 7 cursor 8 node{ 9 name 10 } 11 } 12 } 13 } 14 } que recuperará 1 { 2 "data" { 3 "faction" { 4 "objectid" "aq036irgdp", 5 "name" "alliance to restore the republic", 6 "ships" { 7 "edges" \[ 8 { 9 "cursor" "yxjyyxljb25uzwn0aw9uoje=", 10 "node" { 11 "name" "x wing" 12 } 13 } 14 ] 15 } 16 } 17 } 18 } 7 mutaciones también podemos usar mutaciones compatibles con las mutaciones de relay https //relay dev/docs/en/graphql server specification#mutations creemos una nueva \<font color="#2166ae">nave\</font> 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } eso necesita la siguiente variable de consulta 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } y devolverá el \<font color="#2166ae">id global\</font> y \<font color="#2166ae">nombre\</font> como se especifica en la mutación 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }