Guia essencial de GraphQL para desenvolvedores Front-end

Ver planos

[
    {
        id: 1,
        tripulante_id: 1,
        cargo_id: 1,
        naves_id: 1
    },
    {
        id: 2,
        tripulante_id: 2,
        cargo_id: 2,
        naves_id: 1
    }
]

query {
    nave (id: 1) {
        id
        nome
        classe
        missao
        capitao {
            nome
        }
        tripulacao {
            nome
            cargo {
                nome
            }
        }    
    }
}

function Nave() {
  const { loading, error, data } = useQuery(gql`
    query {
      nave (id: 1) {
          nome
          classe
          missao
      }
    }`);
  if (loading) return (<p>Carregando...</p>);
  if (error) return (<p>Erro ao carregar a nave.</p>);
  const { nome, classe, missao } = data.nave;
  return (
    <ul>
      <li>{ nome } </li>
      <li>{ classe } </li>
      <li>{ missao } </li>
    </ul>
  );
}

import { APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { HttpClientModule } from '@angular/common/http';
import { InMemoryCache } from '@apollo/client/core';
@NgModule({
imports: [BrowserModule, ApolloModule, HttpClientModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory(httpLink: HttpLink) {
return {
cache: new InMemoryCache(),
link: httpLink.create({
uri: 'https://48p1r2roz4.sse.codesandbox.io',
}),
};
},
deps: [HttpLink],
},
],
})
export class AppModule {}


export class Nave implements OnInit {


constructor(private apollo: Apollo) {}


ngOnInit() {
this.apollo
.watchQuery({
query: gql          {             nave (id: 1) {               nome               classe               missao             }           }        ,
})
.valueChanges.subscribe((result: any) => {
console.log(result.data?.nave);
console.log(result.loading);
console.log(result.error);
});
}
}

<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
export default {
  setup () {
    const { result } = useQuery(gql`
        query {
          nave (id: 1) {
            nome
            classe
            missao
          }
        }
    `)
  },
}
</script>