Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing GraphQL with Laravel and Vue.js

Implementing GraphQL with Laravel and Vue.js

Avatar for Alefe Souza

Alefe Souza

August 27, 2019
Tweet

More Decks by Alefe Souza

Other Decks in Programming

Transcript

  1. @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.
  2. Tipos Permitem especificar objetos de entrada e saída, impedindo a

    requisição caso ocorra algo fora do padrão. @alefesouza https://as.dev
  3. 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
  4. Mutations Utilizadas para realizar qualquer tipo de alteração nos dados,

    equivalente ao POST, PUT, PATCH, DELETE, identificados pelo nome. @alefesouza https://as.dev
  5. Implementação com Laravel @alefesouza https://as.dev $ composer install rebing/graphql-laravel $

    php artisan vendor:publish --provider="Rebing\GraphQL\GraphQLServiceProvider"
  6. 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), });
  7. @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>
  8. @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>
  9. @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>