Front-end team lead
Oslo Market Solutions
espen_dev
The challenge was to talk about:
"How we work with Front-end, What challenges do we see, What does the future looks like."
This talk will focus mostly on the latter. While we do lots of exciting stuff, I have been dying to talk about this for some time.
# The type of operation
# + human-readable name of
# this operation
query GetAllUsers {
# The field on the root query
# we are requesting
allUsers {
# The fields on the User
# object we need
id
name
}
}
# Might return:
{
"allUsers": [{
"id": 1,
"name": "Luke Skywalker"
}]
}
# The type of operation
# + human-readable name of this operation
# + input we require for this mutation
mutation CreateNewUser($name: String!) {
# The mutation we want to run
createUser(name: $name) {
# The fields on the User object we want back on success
id
name
}
}
# variables
{"name": "Espen Henriksen"}
# NOTE: We define this here, and implement it in code elsewhere
scalar Date
# A user of the system
type User {
id: ID!
# The full name of this user. Upside down if australian
name: String!
# The posts this user has published
posts: [Post]!
}
# A textual post
type Post {
id: ID!
# The user's chosen post title
title: String!
# The date this was published
publishedAt: Date
}
type Query {
# Get all the users of the system
allUsers: [User]!
# Get a single user by id
user(id: ID!): User!
}
type Query {
user(id: ID!): User
}
type User {
id: ID!
name: String
}
// resolvers.js
import { User } from './connectors';
export default {
Query: {
user(_, args) {
return User.findAll({ where: args });
},
}
}
// server.js
import express from 'express'
import bodyParser from 'body-parser';
import { graphqlExpress } from 'apollo-server-express';
import { makeExecutableSchema } from 'graphql-tools';
import typeDefs from './graphql/schema';
import resolvers from './graphql/resolvers';
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});
const app = express();
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
app.listen(4000);
const MyName = (props) => {
const {
data: {
loading,
error,
user,
},
} = props;
if (error) return `An error occured: ${error}`;
if (loading) return <p>Loading...</p>;
return <p>My name is {user.name}</p>;
};
const getUser = gql`
query getUser {
user(id: 1) {
id
name
}
}
`
export default graphql(getUser)(MyName)
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
const uri = 'http://localhost:4000/graphql';
const apollo = new ApolloClient({
link: new HttpLink({ uri }),
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={apollo}>
<YourApp />
</ApolloProvider>,
document.getElementById('root'),
);
Slides:
http://slides.com/esphen/graphql
More about us:
https://www.oms.no