Parse 3.10+: Integração Avançada com Relay em GraphQL

compatibilidade com relay introdução a api graphql do parse server segue os últimos padrões atualmente disponíveis para apis altamente escaláveis e projetos ambiciosos de front end a equipe do parse open source optou por seguir a especificação do relay https //relay dev/docs/en/graphql server specification relay é um framework javascript para construir aplicações react orientadas a dados, alimentadas por graphql, projetado desde o início para ser fácil de usar, extensível e, acima de tudo, eficiente o relay consegue isso com consultas estáticas e geração de código antecipada a partir do parse 3 10, a compatibilidade total com relay https //relay dev/docs/en/graphql server specification foi implementada este documento irá guiá lo através dessas implementações pré requisitos para começar este tutorial, você precisará um aplicativo criado no back4app veja o tutorial criar novo app para aprender como criar um aplicativo no back4app 1 criar um novo app no back4app antes de tudo, é necessário garantir que você tenha um aplicativo existente criado no back4app no entanto, se você é um novo usuário, pode verificar este tutorial https //www back4app com/docs/get started/new parse app para aprender como criar um 2 criar algumas classes no seu app recém criado, vá para o navegador de banco de dados navegador de banco de dados e clique no botão criar uma classe criar uma classe escolha criar uma classe classe personalizada e dê um nome a ela seguindo o exemplo de esquema relay https //relay dev/docs/en/graphql server specification#schema , eu criei as classes faction, ship e outras conforme descrito com propriedades correspondentes, mas você pode criar suas classes para seguir esta documentação basta alterar suas consultas e mutações de acordo lembre se de que, por convenção, as classes começam com uma letra maiúscula, são camelcase e não contêm caracteres especiais, como espaços e símbolos clique em criar classe criar classe quando terminar 3 console graphql com suas classes e propriedades criadas, você pode ir para a console da api console da api e então console graphql console graphql para executar suas consultas e mutações 4 consultas nossa primeira consulta irá recuperar um objeto com base em seu objectid objectid (não confundir com id id ) parse evoluiu e agora as consultas suportam tanto objectid objectid , anteriormente conhecido como id id nas versões anteriores, mas agora também suporta global id global id , conhecido como id id , que se refere ao id global do relay e tem um formato mais longo, pois contém o nome da classe criptografado exemplo de objectid objectid eat0ddk09v exemplo de id id (a k a id global) rmfjdglvbjpfyvqwzerrmdl2 vamos fazer nossa primeira consulta recuperando um objeto pelo seu objectid objectid 1 query rebelsquery { 2 faction(id "eat0ddk09v") { 3 objectid #objectid for parse 4 id #globalid for relay 5 name #n 6 } 7 } isso irá gerar 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } agora, vamos mudar isso para o 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 } e note que o resultado será o mesmo 1 { 2 "data" { 3 "faction" { 4 "objectid" "eat0ddk09v", 5 "id" "rmfjdglvbjpfyvqwzerrmdl2", 6 "name" "galactic empire" 7 } 8 } 9 } isso acontece porque o identificador global identificador global funciona, como o nome implica, globalmente, e tem o nome da classe criptografado nele, então o parse sabe onde procurar por esse id 5 rebuscando também com o identificador global identificador global você pode pré buscar como a especificação do relay https //relay dev/docs/en/graphql server specification#object identification da seguinte forma 1 query refetchquery{ 2 node(id "rmfjdglvbjpfyvqwzerrmdl2"){ 3 id on faction{ 4 name 5 } 6 } 7 } o que resultará em 1 { 2 "data" { 3 "node" { 4 "id" "rmfjdglvbjpfyvqwzerrmdl2", 5 "name" "galactic empire" 6 } 7 } 8 } 6 conexões conexões do relay https //relay dev/docs/en/graphql server specification#connections funcionam da mesma forma no parse com graphql, então, se você precisar recuperar as naves do rebelde 1 query rebelsshipsquery { 2 faction(id "rmfjdglvbjphctaznklsz2rq"){ 3 objectid 4 name 5 ships{ 6 edges{ 7 node{ 8 name 9 } 10 } 11 } 12 } 13 } o que resultará 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 } você também pode recuperar as 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 em 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 } ou recupere a n ésima nave após uma específica, usando seu 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 irá 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 mutations também podemos usar mutations compatíveis com as mutações do relay https //relay dev/docs/en/graphql server specification#mutations vamos criar uma nova nave nave 1 mutation createbwing($input createshipinput!){ 2 createship(input $input){ 3 ship{ 4 id 5 name 6 } 7 } 8 } isso precisa da seguinte variável de consulta 1 { 2 "input" { 3 "fields" { 4 "name" "b wing" 5 } 6 } 7 } e retornará o id global id global e nome nome conforme especificado na mutação 1 { 2 "data" { 3 "createship" { 4 "ship" { 5 "id" "u2hpcdpxb21qznvzexvf", 6 "name" "b wing" 7 } 8 } 9 } 10 }