|
| 1 | +--- |
| 2 | +title: Apollo / GraphQL Quick Start Guide |
| 3 | +description: Get started with SQLite Cloud using Apollo and GraphQL. |
| 4 | +category: getting-started |
| 5 | +status: publish |
| 6 | +slug: quick-start-apollo-graphql |
| 7 | +--- |
| 8 | + |
| 9 | +In this quickstart, we will show you how to get started with SQLite Cloud and Apollo/GraphQL by writing a simple GraphQL wrapper around a SQLite Cloud database connection. |
| 10 | + |
| 11 | +1. **Set up a SQLite Cloud account** |
| 12 | + - If you haven't already, [sign up for a SQLite Cloud account](https://sqlitecloud.io/register) and create a new project. |
| 13 | + - In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud. |
| 14 | + |
| 15 | +2. **Install the necessary dependencies** |
| 16 | + - In your terminal run the following commands to install a new Apollo Server app. |
| 17 | + |
| 18 | +```bash |
| 19 | +mkdir sqlc-quickstart |
| 20 | +cd sqlc-quickstart |
| 21 | +npm install apollo-server graphql |
| 22 | +``` |
| 23 | + |
| 24 | +3. **Create a new Apollo Server app** |
| 25 | + - Create a new file called `server.js` and add the following code. |
| 26 | + - Import the necessary packages, and instantiate a new Database connection. |
| 27 | +```js |
| 28 | +import { ApolloServer } from '@apollo/server'; |
| 29 | +import { startStandaloneServer } from '@apollo/server/standalone'; |
| 30 | +import { Database } from '@sqlitecloud/drivers'; |
| 31 | + |
| 32 | +const connStr = '<your-connection-string>' |
| 33 | + |
| 34 | +const db = new Database(connStr) |
| 35 | +``` |
| 36 | +- Next, define your GraphQL schema and resolvers. |
| 37 | +```js |
| 38 | +const typeDefs = `#graphql |
| 39 | + type Album { |
| 40 | + AlbumId: Int |
| 41 | + Title: String |
| 42 | + ArtistId: Int |
| 43 | + } |
| 44 | +
|
| 45 | + type Artist { |
| 46 | + ArtistId: Int |
| 47 | + Name: String |
| 48 | + } |
| 49 | +
|
| 50 | + type Track { |
| 51 | + TrackId: Int |
| 52 | + Name: String |
| 53 | + AlbumId: Int |
| 54 | + MediaTypeId: Int |
| 55 | + GenreId: Int |
| 56 | + Composer: String |
| 57 | + Milliseconds: Int |
| 58 | + Bytes: Int |
| 59 | + UnitPrice: Float |
| 60 | + } |
| 61 | +
|
| 62 | + type Genre { |
| 63 | + GenreId: Int |
| 64 | + Name: String |
| 65 | + } |
| 66 | +
|
| 67 | + type MediaType { |
| 68 | + MediaTypeId: Int |
| 69 | + Name: String |
| 70 | + } |
| 71 | +
|
| 72 | + type Join { |
| 73 | + AlbumId: Int |
| 74 | + Title: String |
| 75 | + ArtistName: String |
| 76 | + } |
| 77 | +
|
| 78 | + type Query { |
| 79 | + albums: [Album] |
| 80 | + artists: [Artist] |
| 81 | + tracks: [Track] |
| 82 | + genres: [Genre] |
| 83 | + mediaTypes: [MediaType] |
| 84 | + joins: [Join] |
| 85 | + artist(name: String): Artist |
| 86 | + albumsByArtist(artistId: Int): [Album] |
| 87 | + } |
| 88 | +
|
| 89 | + type Mutation { |
| 90 | + createArtist(name: String): Artist |
| 91 | + createAlbum(title: String, artistId: Int): Album |
| 92 | + } |
| 93 | +`; |
| 94 | + |
| 95 | +const resolvers = { |
| 96 | + Query: { |
| 97 | + albums: async () => { |
| 98 | + return await db.sql`SELECT * FROM albums`; |
| 99 | + }, |
| 100 | + artists: async () => { |
| 101 | + return await db.sql`SELECT * FROM artists`; |
| 102 | + }, |
| 103 | + tracks: async () => { |
| 104 | + return await db.sql`SELECT * FROM tracks`; |
| 105 | + }, |
| 106 | + genres: async () => { |
| 107 | + return await db.sql`SELECT * FROM genres`; |
| 108 | + }, |
| 109 | + mediaTypes: async () => { |
| 110 | + return await db.sql`SELECT * FROM media_types`; |
| 111 | + }, |
| 112 | + artist: async (_, { name }) => { |
| 113 | + const res = await db.sql`SELECT * FROM artists WHERE Name LIKE ${name};`; |
| 114 | + if (res.length === 0) return null; |
| 115 | + return res[0]; |
| 116 | + }, |
| 117 | + albumsByArtist: async (_, { artistId }) => { |
| 118 | + return await db.sql`SELECT albums.AlbumId, albums.Title FROM albums INNER JOIN artists ON albums.ArtistId = artists.ArtistId WHERE artists.ArtistId = ${artistId}`; |
| 119 | + }, |
| 120 | + }, |
| 121 | + Mutation: { |
| 122 | + createArtist: async (_, { name }) => { |
| 123 | + const res = |
| 124 | + await db.sql`INSERT INTO artists (Name) VALUES (${name})`; |
| 125 | + if (res.changes === 0) return null; |
| 126 | + return { ArtistId: res.lastID, Name: name }; |
| 127 | + }, |
| 128 | + createAlbum: async (_, { title, artistId }) => { |
| 129 | + const res = |
| 130 | + await db.sql`INSERT INTO albums (Title, ArtistId) VALUES (${title}, ${artistId})`; |
| 131 | + if (res.changes === 0) return null; |
| 132 | + return { |
| 133 | + AlbumId: res.lastID, |
| 134 | + Title: title, |
| 135 | + ArtistId: artistId, |
| 136 | + }; |
| 137 | + }, |
| 138 | + }, |
| 139 | +}; |
| 140 | +``` |
| 141 | + |
| 142 | +- Lastly, pass the GraphQLL type definitions and resolvers into a new ApolloServer instance, and start the server. |
| 143 | +```js |
| 144 | +const server = new ApolloServer({ typeDefs, resolvers }); |
| 145 | + |
| 146 | +const { url } = await startStandaloneServer(server, { |
| 147 | + listen: { port: 4000 }, |
| 148 | + context: async () => ({ db }) |
| 149 | +}); |
| 150 | + |
| 151 | +console.log(`🚀 Server ready at: ${url}`); |
| 152 | +``` |
| 153 | + |
| 154 | +4. **Run your app** |
| 155 | + - In your terminal, run the following command to start your Apollo Server. |
| 156 | +```bash |
| 157 | +node server.js |
| 158 | +``` |
| 159 | + |
| 160 | +5. **Query your data** |
| 161 | + - Open your browser and navigate to `http://localhost:4000` to access the Apollo GraphQL Playground. |
| 162 | + - Use the following queries to interact with your SQLite Cloud database. |
| 163 | + |
| 164 | +Read operation: |
| 165 | +```graphql |
| 166 | +query { |
| 167 | + albums { |
| 168 | + AlbumId |
| 169 | + Title |
| 170 | + ArtistId |
| 171 | + } |
| 172 | +} |
| 173 | +``` |
| 174 | + |
| 175 | +Write operation: |
| 176 | +```graphql |
| 177 | +mutation { |
| 178 | + createArtist(name: "New Artist") { |
| 179 | + ArtistId |
| 180 | + Name |
| 181 | + } |
| 182 | +} |
| 183 | +``` |
| 184 | + |
| 185 | +And that's it! You've successfully built an Apollo/GraphQL server that reads and writes data to a SQLite Cloud database. |
| 186 | + |
| 187 | +For the full code example, see the [SQLite Cloud Apollo/GraphQL example repo](https://github.com/sqlitecloud/examples/tree/main/graphql-apollo/server). |
0 commit comments