Implementing GraphQL with Laravel and Vue.js

https://github.com/alefesouza/talk-laravel-vue-graphql

Transcript

1. Implementando GraphQL com Laravel e Vue.js
2. @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.
3. GraphQL? Uma especificação de linguagem de consulta de APIs, desenvolvida pelo Facebook. @alefesouza https://as.dev
4. @alefesouza https://as.dev Príncipios • Tipos • Queries • Mutations
5. Tipos Permitem especificar objetos de entrada e saída, impedindo a requisição caso ocorra algo fora do padrão. @alefesouza https://as.dev
6. 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
7. Mutations Utilizadas para realizar qualquer tipo de alteração nos dados, equivalente ao POST, PUT, PATCH, DELETE, identificados pelo nome. @alefesouza https://as.dev
8. Onde funciona? @alefesouza https://as.dev
9. Onde funciona? @alefesouza https://as.dev
10. Implementação com Laravel @alefesouza https://as.dev $ composer install rebing/graphql-laravel $ php artisan vendor:publish --provider="Rebing\GraphQL\GraphQLServiceProvider"
11. Implementação no Vue.js @alefesouza https://as.dev $ npm install --save vue-apollo graphql apollo-boost
12. 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), });
13. @alefesouza https://as.dev <ApolloQuery :query="require('./../gralphql/queries/fetchUsers.gql')" > <template v-slot="{ result: { loading, error, data } }"> <!-- Loading --> <div v-if="loading" class="loading apollo">Carregando...</div> <!-- Error --> <div v-else-if="error" class="error apollo">Houve um erro</div> <!-- Result --> <div v-else-if="data" class="result apollo"> <ul> <li v-for="user in data.users" :key="user.id"> <b>Nome:</b> {{ user.name }}<br> <b>E-mail:</b> {{ user.email }}<br> <b>Empresa:</b> {{ user.company.name }} </li> </ul> </div> </template> </ApolloQuery>
14. @alefesouza https://as.dev <ApolloQuery :query="require('./../gralphql/queries/fetchUser.gql')" :variables="{ id: userId }" > <template v-slot="{ result: { loading, error, data } }"> <!-- Loading --> <div v-if="loading" class="loading apollo">Carregando...</div> <!-- Error --> <div v-else-if="error" class="error apollo">Houve um erro</div> <!-- Result --> <div v-else-if="data" class="result apollo"> <b>Nome:</b> {{ data.user.name }}<br> <b>E-mail:</b> {{ data.user.email }}<br> <b>Empresa:</b> {{ data.user.company.name }} </div> </template> </ApolloQuery>
15. @alefesouza https://as.dev <ApolloMutation :mutation="require('../gralphql/mutations/addUser.gql')" :variables="{ input }" @done="onDone" > <template v-slot="{ mutate, loading, error }"> <div> <div> <div>Nome:</div> <input type="text" v-model="input.name"> </div> <div> <div>E-mail:</div> <input type="text" v-model="input.email"> </div> <div> <div>ID da empresa:</div> <input type="number" v-model="input.company_id"> </div> </div> <button :disabled="loading" @click="mutate()">Salvar</button> <p v-if="error">Ocorreu um erro: {{ error }}</p> </template> </ApolloMutation>
16. Live Code! http://bit.ly/talk-laravel-vue-graphql @alefesouza https://as.dev
17. Obrigado!! @alefesouza https://as.dev http://bit.ly/talk-laravel-vue-graphql