Tweet
Tweet

Slide 1

Slide 1 text

Implementando GraphQL com Laravel e Vue.js

Slide 2

Slide 2 text

@alefesouza https://as.dev Alefe Souza Full Stack Developer @alefesouza Programador PHP desde os 17 anos, instrutor de desenvolvimento de software, formado em análise e desenvolvimento de sistemas, Microsoft Specialist em tecnologias web.

Slide 3

Slide 3 text

GraphQL? Uma especificação de linguagem de consulta de APIs, desenvolvida pelo Facebook. @alefesouza https://as.dev

Slide 4

Slide 4 text

@alefesouza https://as.dev Príncipios ● Tipos ● Queries ● Mutations

Slide 5

Slide 5 text

Tipos Permitem especificar objetos de entrada e saída, impedindo a requisição caso ocorra algo fora do padrão. @alefesouza https://as.dev

Slide 6

Slide 6 text

Queries Utilizadas para consultas no endpoint único, também é muito fácil de solicitar apenas o que os campos necessários. @alefesouza https://as.dev

Slide 7

Slide 7 text

Mutations Utilizadas para realizar qualquer tipo de alteração nos dados, equivalente ao POST, PUT, PATCH, DELETE, identificados pelo nome. @alefesouza https://as.dev

Slide 8

Slide 8 text

Onde funciona? @alefesouza https://as.dev

Slide 9

Slide 9 text

Onde funciona? @alefesouza https://as.dev

Slide 10

Slide 10 text

Implementação com Laravel @alefesouza https://as.dev $ composer install rebing/graphql-laravel $ php artisan vendor:publish --provider="Rebing\GraphQL\GraphQLServiceProvider"

Slide 11

Slide 11 text

Implementação no Vue.js @alefesouza https://as.dev $ npm install --save vue-apollo graphql apollo-boost

Slide 12

Slide 12 text

Implementação no Vue.js @alefesouza https://as.dev import VueApollo from 'vue-apollo'; import ApolloClient from 'apollo-boost'; import App from './App.vue'; Vue.use(VueApollo); const apolloClient = new ApolloClient(); const apolloProvider = new VueApollo({ defaultClient: apolloClient, }); new Vue({ el: '#app', apolloProvider, render: h => h(App), });

Slide 13

Slide 13 text

@alefesouza https://as.dev
Carregando...
Houve um erro
  • Nome: {{ user.name }}
    E-mail: {{ user.email }}
    Empresa: {{ user.company.name }}

Slide 14

Slide 14 text

@alefesouza https://as.dev
Carregando...
Houve um erro
Nome: {{ data.user.name }}
E-mail: {{ data.user.email }}
Empresa: {{ data.user.company.name }}

Slide 15

Slide 15 text

@alefesouza https://as.dev
Nome:
E-mail:
ID da empresa:
Salvar

Ocorreu um erro: {{ error }}

Slide 16

Slide 16 text

Live Code! http://bit.ly/talk-laravel-vue-graphql @alefesouza https://as.dev

Slide 17

Slide 17 text

Obrigado!! @alefesouza https://as.dev http://bit.ly/talk-laravel-vue-graphql