🛠Backend first steps
On the backend side, our first goal is to create a GraphQL server that can:
- Receive an incoming GraphQL query from our client
- Validate that query against our newly created schema
- Populate the queried schema fields with mocked data
- Return the populated fields as a response
The Apollo Server library helps us implement this server quickly, painlessly, and in a production-ready way.
Note: In this course, we're using Apollo Server 3. If you need to reference the Apollo documentation while going through the course, make sure you're on the v3 documentation set!
In the server/src/
folder, open index.js
.
To create our server, we'll use the apollo-server
package that we installed previously. From that package, we'll only need the named export ApolloServer
, so we'll declare that constant between curly braces. Just below, we'll import our typeDefs
from our schema.js
file:
const { ApolloServer } = require("apollo-server");const typeDefs = require("./schema");
Next, we'll create an instance of the ApolloServer
class and pass it our typeDefs
in its options object:
const server = new ApolloServer({ typeDefs });
Note: We're using shorthand property notation with implied keys, because we've named our constant with the matching key (typeDefs
).
Finally, to start it up, we'll call the async listen
method. When it resolves, it logs a nice little message letting us know that our server is indeed up and running:
server.listen().then(() => {console.log(`🚀 Server is running!🔉 Listening on port 4000📠Query at http://localhost:4000`);});
Save your changes. From the terminal, we'll launch our server with npm run start
(make sure you're in the server/
folder).
We get the log message and...not much else! We have a running server, but that's it. Floating in the vacuum of localhost
space without access to any data, it's a sad and lonely server for now. 😿
Even though our server isn't connected to any data sources yet, it would be great to be able to send the server a test query and get a valid response. Fortunately, ApolloServer
provides a way to do exactly that, using mocked data.
To enable basic mocked data, we could provide mocks:true
to the ApolloServer
constructor, like so:
const server = new ApolloServer({typeDefs,mocks: true,});
This instructs Apollo Server to populate every queried schema field with a placeholder value (such as Hello World
for String
fields).
However, Hello World
isn't a very realistic value for the title of a track or the URL of an author's picture! To serve mocked data that's closer to reality, we'll pass an object to the mocks
property instead of just true
. This object contains functions that provide the mocked data we want the server to return for each queried field.
Here's our mocks
object:
const mocks = {Track: () => ({id: () => "track_01",title: () => "Astro Kitty, Space Explorer",author: () => {return {name: "Grumpy Cat",photo:"https://res.cloudinary.com/apollographql/image/upload/v1730818804/odyssey/lift-off-api/catstrophysicist_bqfh9n_j0amow.jpg",};},thumbnail: () =>"https://res.cloudinary.com/apollographql/image/upload/v1730818804/odyssey/lift-off-api/nebula_cat_djkt9r_nzifdj.jpg",length: () => 1210,modulesCount: () => 6,}),};
This object defines mock values for all of the fields of a Track
object (including the Author
object it contains). We pass this object to the ApolloServer
constructor like so:
const server = new ApolloServer({typeDefs,mocks,});
With mocks enabled, Apollo Server always returns exactly two entries for every list field.
To get more entries at a time, let's say 6, we'll add a Query.tracksForHome
to our mocks
object and return an Array of that given length like so: [...new Array(6)]
.
const mocks = {Query: () => ({tracksForHome: () => [...new Array(6)],}),Track: () => ({id: () => "track_01",title: () => "Astro Kitty, Space Explorer",author: () => {return {name: "Grumpy Cat",photo:"https://res.cloudinary.com/apollographql/image/upload/v1730818804/odyssey/lift-off-api/catstrophysicist_bqfh9n_j0amow.jpg",};},thumbnail: () =>"https://res.cloudinary.com/apollographql/image/upload/v1730818804/odyssey/lift-off-api/nebula_cat_djkt9r_nzifdj.jpg",length: () => 1210,modulesCount: () => 6,}),};
Create a mock object with a type SpaceCat
, an id
of spacecat_01, and a title
of 'spacecat pioneer'
Now, with our server loaded with mocked data, how can we run a query on it to test if everything works as expected? In the next lesson, we'll use the Apollo Studio Explorer to build and run test queries seamlessly.
Share your questions and comments about this lesson
Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.
You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.