A workshop from the marketing engineering team @auth0
To start developing with GraphQL and ensure predictable results you need an schema, we're going to dive into that later, but this being mandatory is documentation and validation all in one for your GraphQL server.
var schema = buildSchema(`
type Query {
hello: String
}
`);
This is the part where you build your query, and we'll see it's super simple. If you only need the id and title of a post ask for that, no need to ask for the the entire 65k length body of a list of 10 posts every single time. All of that with the same endpoint, just giving some super easy instructions to your server.
{
query {
hello
}
}
We were talking about this, but no more. Resolvers will take care of this, if you need a list of 3 posts, 1 specific post and it's author, don't do 3 requests, ask for what you need, graphql handles everything else.
const rootResolver = {
hello: () => {
return 'Hello world!';
},
};
git clone git@github.com:auth0/mxp-graphql-workshop.git
git checkout start
npm install
You can skip it with the branch: single-post
This will define what can we query and the types that will define our responses. First we're going to create a small one and later we'll move into the final one:
const { buildSchema } = require("graphql");
// You can read more about types and schemas here: https://graphql.org/learn/schema/
const schema = buildSchema(`
type Query {
post(id: ID!): Post
}
type Post {
id: ID!
title: String!
body: String!
tags: [String]!
}
`);
// Read more about resolvers: https://graphql.org/learn/execution/
const rootResolver = {
post: ({ id }) => {
return posts.find(post => post.id == id);
}
};
// After defining our express and before declaring the handling of all routes
server.use(
"/graphql",
graphqlHTTP({
schema: schema,
rootValue: rootResolver,
graphiql: true
})
);
First run: `npm run dev`Β and then go to: http://localhost:3000/graphiql to see GraphiQL in action
query {
post(id: 3) {
title
}
}
You can skip it with the branch: multiple-posts
Now it's time to add a little bit of complexity and have multiple queries and types in our app.
const schema = buildSchema(`
type Query {
post(id: ID!): Post
posts(count: Int): FeedPost
}
type Post {
id: ID!
title: String!
body: String!
tags: [String]!
}
type FeedPost {
total: Int!
items: [Post]
}
`);
const rootResolver = {
post: ({ id }) => {
return posts.find(post => post.id == id);
},
posts: ({ count = 10 }) => {
const items = posts.slice(0, count);
return {
items: items,
count: items.length
};
}
};
query {
post(id: 3) {
title
}
posts(count: 5) {
items {
title
body
}
}
}
Try adding properties, asking for only one query or two, it's up to you!
You can skip it with the branch: axios
Real case scenario! We're going to use axios to fetch data and show it in our index.
import React from "react";
import axios from "axios";
const Index = ({ posts }) =>
posts.items.map(post => (
<div key={post.title}>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
));
Index.getInitialProps = async () => {
const response = await axios.post("http://localhost:3000/graphql", {
query: `query {
posts(count: 10) {
items {
id
title
body
tags
}
}
}`
});
return { posts: response.data.data.posts };
};
export default Index;