Thesis M0394 Copy
Total Page:16
File Type:pdf, Size:1020Kb
The Web service development with Re- act, GraphQL and Apollo Dmitry Sklyarov Bachelor's thesis October 2020 Information and Communications Technology Degree Programme in Media Engineering Description Author(s) Type of publication Date Sklyarov, Dmitry Bachelor's thesis October 2020 Language of publication English Number of pages Permission for web publi- 110 cation: x Title of publication The Web service development with React, GraphQL and Apollo Degree programme Media Engineering Supervisor Rantala, Ari Assigned by Movya Oy Abstract The goal of the project, assigned by Movya Oy, was to develop a Web service that facili- tates the creation of business proposals and subsequent contracts between the company and the customer. An essential aspect of software development was using a modern server, and client tech- nologies React, GraphQL, and Apollo. The various stages of developing a web service included database design and manage- ment, responsive application design building, and implementing access control, pagination, sorting, filtering large amounts of data, grouping items, editing documents, etc. The thesis covers both the most critical aspects of developing these features, including the theoreti- cal part before. The main result of the thesis was the product itself - the Web service called Moffers. In ad- dition to this specific result, a lot of useful experience was gained, as well as knowledge of modern technologies and methods in JavaScript programming. Keywords/tags (subjects) Web service, JavaScript, React, GraphQL, Apollo, Ant Design, Mongoose, MongoDB Miscellaneous (Confidential information) Kuvailulehti Tekijä(t) Julkaisun laji Päivämäärä Sklyarov, Dmitry Opinnäytetyö, AMK Lokakuu 2020 Julkaisun kieli Englanti Sivumäärä Verkkojulkaisulupa 110 myönnetty: x Työn nimi The Web service development with React, GraphQL and Apollo Tutkinto-ohjelma Mediatekniikka Työn ohjaaja(t) Rantala, Ari Toimeksiantaja(t) Movya Oy Tiivistelmä Opinnäytetyön toimeksiantajana oli Movya Oy. Opinnäytetyön tavoitteena oli kehittää verkkopalvelu, joka auttaa myyntitiimiä arvioimaan ja luomaan räätälöityjä tarjouksia no- peasti. Oleellinen osa ohjelmistokehitystä oli modernien asiakastekniikoiden kuten React, GraphQL ja Apollo käyttäminen. Verkkopalvelun kehittämisen eri vaiheisiin sisältyi mm. tietokannan suunnittelu, pääsynval- vonta, suurten tietomäärien suodattaminen, kohteiden ryhmittely ja asiakirjojen muokkaa- minen. Opinnäytetyö kattaa laajan tietoperustan, kriittisen arvioinnin valituille menetelmille ja ominaisuuksien kehittämiselle. Opinnäytetyön päätulos oli itse tuote - verkkopalvelu nimeltä Moffers. Tämän nimenomai- sen tuloksen lisäksi saatiin paljon hyödyllistä kokemusta sekä tietoa nykyaikaisista teknii- koista ja menetelmistä JavaScript-ohjelmoinnissa. Toimeksiantaja oli erittäin tyytyväinen tuloksiin. Avainsanat (asiasanat) Web service, JavaScript, React, GraphQL, Apollo, Ant Design, Mongoose, MongoDB Muut tiedot (salassa pidettävät liitteet) 4 Contents Terminology ......................................................................................................... 11 1 Introduction .................................................................................................. 18 1.1 Client presentation ................................................................................... 18 1.2 Project and thesis objectives .................................................................... 18 2 Web services ................................................................................................. 19 2.1 What are Web services? ........................................................................... 19 2.2 Difference between Web services and APIs ............................................. 19 3 React ............................................................................................................. 20 3.1 DOM and Virtual DOM .............................................................................. 21 3.2 JSX ............................................................................................................. 22 3.3 Rendering elements .................................................................................. 22 3.4 Components and props ............................................................................. 23 3.5 State .......................................................................................................... 24 3.6 Component lifecycle ................................................................................. 25 3.7 Event handling .......................................................................................... 26 3.8 Context API ............................................................................................... 26 4 GraphQL ........................................................................................................ 27 4.1 Solving REST problems using GraphQL ..................................................... 28 4.1.1 Over-fetching ................................................................................. 28 4.1.2 Under-fetching ............................................................................... 29 4.1.3 Endpoint management ................................................................... 30 4.1.4 Schema definition .......................................................................... 31 4.1.5 Documentation .............................................................................. 31 4.1.6 Versioning ...................................................................................... 32 4.2 Queries ...................................................................................................... 33 5 4.3 Arguments ................................................................................................ 35 4.4 Operation type and name ......................................................................... 35 4.5 Variables ................................................................................................... 36 4.6 Aliases ....................................................................................................... 37 4.7 Fragments ................................................................................................. 38 4.8 Directives .................................................................................................. 39 4.9 Mutations ................................................................................................. 40 4.10 Subscriptions ............................................................................................. 40 4.11 GraphQL server ......................................................................................... 42 4.11.1 GraphQL server with a database connected .................................. 43 4.11.2 GraphQL server that integrates existing systems ........................... 43 4.11.3 Hybrid approach ............................................................................. 44 4.11.4 Server building ............................................................................... 44 4.11.5 Schema ........................................................................................... 45 4.11.6 Resolvers ........................................................................................ 46 4.12 GraphQL client .......................................................................................... 47 4.12.1 Sending queries to the server ........................................................ 47 4.12.2 Integration with UI components .................................................... 48 4.12.3 Data caching ................................................................................... 48 4.12.4 Build-time schema validation and optimizations ........................... 48 5 Apollo ........................................................................................................... 49 5.1 Apollo Server ............................................................................................. 49 5.1.1 Stand-alone installation ................................................................. 50 5.1.2 Integration installation ................................................................... 50 5.1.3 Context ........................................................................................... 51 5.2 Apollo Client .............................................................................................. 52 5.2.1 Apollo Client architecture .............................................................. 52 6 5.2.2 Cache layer ..................................................................................... 53 5.2.3 Network layer ................................................................................. 54 5.2.4 Configure Apollo Client with React ................................................ 55 5.2.5 Data querying ................................................................................. 56 5.2.6 Updating the cache after a mutation ............................................. 57 6 Project implementation ................................................................................ 59 6.1 Development environment and tools ....................................................... 59 6.2 Setting up the project ............................................................................... 60 6.2.1 Database ........................................................................................ 61 6.2.2 Server ............................................................................................