Implementing GraphQL with PHP - PHP Community Summit

Transcript

1. Implementando GraphQL com PHP @alefesouza https://as.dev
2. Alefe Souza @alefesouza https://as.dev 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. Agenda • O que é GraphQL • Conceitos básicos • Demo • Implementação em Laravel • Implementação no front-end @alefesouza https://as.dev
4. @alefesouza https://as.dev GraphQL? Uma especificação de linguagem de consulta de APIs, desenvolvida pelo Facebook.
5. @alefesouza https://as.dev GraphQL? Baseado em apenas um endpoint.
6. @alefesouza https://as.dev GraphQL? Fortemente tipada.
7. @alefesouza https://as.dev GraphQL? Documentação automática.
8. @alefesouza https://as.dev Conceitos básicos • Tipos • Queries • Mutations
9. @alefesouza https://as.dev Tipos Permitem especificar objetos de entrada e saída, impedindo a requisição caso ocorra algo fora do padrão.
10. @alefesouza https://as.dev Queries Utilizadas para consultas no endpoint único, também é muito fácil de solicitar apenas o que os campos necessários.
11. @alefesouza https://as.dev Mutations Utilizadas para realizar qualquer tipo de alteração nos dados, equivalente ao POST, PUT, PATCH, DELETE, identificados pelo nome.
12. @alefesouza https://as.dev Onde funciona?
13. @alefesouza https://as.dev Onde funciona?
14. @alefesouza https://as.dev Quem utiliza?
15. @alefesouza https://as.dev $ composer install webonyx/graphql-php Como iniciar?
16. @alefesouza https://as.dev Demo! http://bit.ly/talk-graphql-php
17. @alefesouza https://as.dev Implementação no Laravel $ composer install rebing/graphql-laravel $ php artisan vendor:publish --provider="Rebing\GraphQL\GraphQLServiceProvider"
18. @alefesouza https://as.dev Implementação no front-end $ npm install --save vue-apollo graphql apollo-boost
19. @alefesouza https://as.dev Implementação no front-end 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), });
20. @alefesouza https://as.dev <ApolloQuery :query="require('./../graphql/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>
21. @alefesouza https://as.dev <ApolloQuery :query="require('./../graphql/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>
22. @alefesouza https://as.dev <ApolloMutation :mutation="require('../graphql/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>
23. @alefesouza https://as.dev Obrigado! @alefesouza https://bit.ly/talk-graphql-php https://bit.ly/talk-laravel-vue-graphql