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 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 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 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 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 navegador de base de datos navegador de base de datos y haz clic en el crear una clase crear una clase botón elige crear una clase personalizada clase personalizada y dale un nombre siguiendo el 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 crear clase crear clase cuando hayas terminado 3 consola de graphql con tus clases y propiedades creadas, puedes ir a la consola de api consola de api y luego a la consola de graphql consola de graphql para ejecutar tus consultas y mutaciones 4 consultas nuestra primera consulta recuperará un objeto basado en su objectid objectid (no confundir con id id ) parse ha evolucionado y ahora las consultas soportan tanto objectid objectid , anteriormente conocido como id id en versiones anteriores, pero ahora también soporta global id global id , conocido como id id , 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 objectid objectid eat0ddk09v ejemplo de id id (también conocido como id global) rmfjdglvbjpfyvqwzerrmdl2 hagamos nuestra primera consulta recuperando un objeto por su objectid objectid 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 id global id global 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 id global id global puedes prefetch como 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 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 https //relay dev/docs/en/graphql server specification#mutations creemos una nueva nave nave 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 id global id global y nombre nombre 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 }