Apollo ecosystem

- INTERNAL USE ONLY -
Apollo ecosystem
1
James Akwuh
Frontend Lead @ Marketplace Group
Minsk, July 2018

Agenda
• Preface
• Setup & Examples
• Tooling
• Security
• Versioning
• Monitoring
• Files upload
• Pagination
• Schema design
• ACL
• State management
• Performance
• Testing react components
• Server-side rendering
2

Agenda
• Apollo 2.1
• Relay
• Conclusion
3

Preface
4

Apollo Platform
• Apollo Client (ApolloClient, Query/Mutation/Subscription)
• Apollo Server (ApolloServer, makeExecutableSchema)
• Apollo Engine $$$ (express app gateway)
5

Apollo consumers
• The NY Times
• Airbnb
• Express (ecommerce retailer)
• Major League Soccer
• Expo
• KLM
• Adform!
6

Setup & Examples
7

Apollo Server
8
# schema.graphql
type DealResponse {
count: Int
results: [Deal]
}
type Deal {
id: String
name: String
}
type Query {
deals(
text: String
): DealResponse
}

Apollo Server
9
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import fs from 'fs';
const schemaDefinition = fs.readFileSync('./src/schema/schemaDefinition.gql', 'utf8');
const executableSchema = makeExecutableSchema({
typeDefs: schemaDefinition
});
addMockFunctionsToSchema({
schema: executableSchema
});
export default executableSchema;

Apollo Server
10
app.post(
['/schema', '/graphql'],
bodyParser.json(),
(req, res, next) => {setTimeout(next, 500)},
graphqlExpress({
schema: executableSchema,
tracing: false,
graphiql: true
})
);

Apollo Engine
11
const engine = new ApolloEngine({
apiKey: 'API_KEY_HERE'
});
// Call engine.listen instead of app.listen(port)
engine.listen({
port: 3000,
expressApp: app,
});

Apollo Client
12
import ApolloClient from "apollo-boost";
const ConnectedApp = () => {
const client = new ApolloClient({
uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
});
return (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
)
};

Apollo Client
13
client
.query({
query: gql`
{
rates(currency: "USD") {
currency
}
}
`
})
.then(result => console.log(result));

Apollo Query*
14
const GET_DOGS = gql`
{
dogs {
id
breed
}
}
`;
const Dogs = props => (
<Query query={GET_DOGS}>
{({ loading, error, data }) => {
// ...
}}
</Query>
);

Tooling
15

Tooling
• GraphQL Playground / GraphiQL
• launchpad.graphql.com
• Apollo Devtools*
• Apollo Engine
• babel-plugin-import-graphql
• ...
16

Security
17

Security. Schema introspection
“For security, Apollo Server introspection is automatically
disabled when the NODE_ENV is set to production or
testing”
18

Security. Injection
No:
deals(filters="limit=1") {
count
}
Yes:
deals(limit=1) {
count
}
• Doesn’t help with string parameters:
19

Security. DoS
query evil {
album(id: 42) {
songs {
album {
songs {
album {
songs {
album {
songs {
album {
songs {
album {
songs {
album {
# and so on...
}
}
}
}
}
}
}
}
}
}
}
}
}
}
20

Security. DoS
As usual +
- Operation safe-listing
- Complexity limits: simple and advanced
21

Security. DoS
Max Stoiber Advanced security
22

Versioning
23

Versioning
• No API versions (well, you can actually)
• Field usage (Apollo Engine schema history)
• Field rollover (resolver alias + @deprecated)
- Provide developers with the helpful deprecation
message referring them to the new name.
- Avoid auto-completing the field.
• Changing arguments (no good ideas, use field rollover).
24

Versioning
25

Versioning. Resolver alias
const getUserResolver = (root, args, context) => {
context.User.getById(args.id);
};
const resolvers = {
Query: {
getUser: getUserResolver,
user: getUserResolver,
},
};
26

Versioning. @deprecated
type Query {
user(id: ID!): User @deprecated(reason: "renamed to 'getUser'")
getUser(id: ID!): User
}
27

Versioning. Client fields renaming
query SuggestPublishers($limit: Int, $offset: Int, $text: String) {
items: inventorySources(limit: $limit, offset: $offset, text: $text) {
count
results {
id,
name
}
}
28

Monitoring
29

Monitoring
30

Monitoring
31

Monitoring
32

Monitoring
33

Files Upload
34

Files upload. Server
const resolvers = {
Upload: GraphQLUpload,
Mutation: {
async singleUpload(parent, { file }) {
const { stream, filename, mimetype, encoding } = await file;
// ...
return { stream, filename, mimetype, encoding };
}
},
};
35

Files upload. Server
• maxFieldSize
• maxFileSize
• maxFiles
36

Files upload. Client
import { createUploadLink } from 'apollo-upload-client'
const link = createUploadLink(/* Options */)
37

Files upload. Client
export default graphql(gql`
mutation($files: [Upload!]!) {
uploadFiles(files: $files) {
id
}
}
`)(({ mutate }) => (
<input type="file" multiple
onChange={({ target: { validity, files } }) =>
validity.valid && mutate({ variables: { files } })
}
/>
))
38

Pagination
39

Pagination
options: ({ queryVariables }) => ({
variables: queryVariables,
notifyOnNetworkStatusChange: true,
fetchPolicy: APOLLO_FETCH_POLICIES.CACHE_AND_NETWORK,
}),
40

Pagination
props: ({
data: {
error,
loading: isLoading,
items: { availableCount, results = [] } = {},
fetchMore,
refetch,
networkStatus,
},
}) => {...}
41

Pagination
const isFirstPage = networkStatus !== APOLLO_NETWORK_STATUSES.FETCH_MORE;
…
return {
...
/**
* `() => refetch()` is *mandatory* in order to prevent event handlers from passing arguments
such as *event*
* to *Apollo* `refetch` function as it treats arguments as variables for GraphQL queries.
* Otherwise, it would lead to errors in `JSON.parse(...)` when trying to parse circular data.
*/
refetch: () => refetch(),
};
42

Pagination
export const APOLLO_NETWORK_STATUSES = {
FETCH_MORE: NetworkStatus.fetchMore,
/**
* networkStatus === ERROR *only* when http status is bad (e.g. 4xx, 5xx)
* however usually you want to handle also errors in resolvers, e.g.
* http status is 200 but response contains `errors` property.
* Consider using Boolean(data.error) instead of (data.networkStatus === ERROR)
*/
ERROR: NetworkStatus.error,
};
43

Pagination. More pitfalls
• 1.x: fetchMore doesn’t trigger rerender on error
44

Pagination. Imperative update
query Feed($type: FeedType!, $offset: Int, $limit: Int) {
currentUser {
login
}
feed(type: $type, offset: $offset, limit: $limit) @connection(key: "feed") {
id
# ...
}
}
…
client.writeData
45

Schema design
46

Schema design
“Design by client needs”
47

Schema design
• Use interfaces
• Use QueryResponse
• Use MutationResponse
• Use input types
• Use your clients style convention (GQL is flexible)
48

Schema design. QueryResponse
type DealResponse {
availableCount: Int
count: Int
results: [Deal]
}
type Query {
deals(
text: String,
...
): DealResponse
}
49

Schema design. MutationResponse
type LikePostMutationResponse implements MutationResponse {
code: String!
success: Boolean!
message: String!
post: Post
user: User
}
50

Schema design. Input types
input PostAndMediaInput {
"A main title for the post"
title: String
"The textual body of the post."
body: String
"A list of URLs to render in the post."
mediaUrls: [String]
}
51

ACL
Available options:
• Delegate to REST API
• Authorization via context
• Authorization via directives
53

ACL. Authorization via context
context: ({ req }) => {
const token = req.headers.authentication || '';
const user = getUser(token);
if (!user) throw new AuthorizationError('you must be logged in');
return { user };
},
54

ACL. Authorization via context
users: (root, args, context) => {
// In this case, we'll pretend there is no data when
// we're not logged in. Another option would be to
// throw an error.
if (!context.user) return [];
return ['bob', 'jake'];
}
55

ACL. Authorization via directives
directive @auth(requires: Role = ADMIN) on OBJECT | FIELD_DEFINITION
enum Role {
ADMIN
REVIEWER
USER
}
type User @auth(requires: USER) {
name: String
banned: Boolean @auth(requires: ADMIN)
canPost: Boolean @auth(requires: REVIEWER)
}
56

State management
57

State management
Since Apollo Client supports managing both local and
remote data, you can use the Apollo cache as a single
source of truth for all global state in your application.
58

State management
apollo-link-state
uri: `https://nx9zvp49q7.lp.gql.zone/graphql`,
clientState: {
defaults,
resolvers,
typeDefs
}
});
59

State management. Defaults
initialState → defaults
60

State management. Resolvers
export const resolvers = {
Mutation: {
toggleTodo: (_, variables, { cache, getCacheKey }) => {
const id = getCacheKey({ __typename: 'TodoItem', id: variables.id })
const fragment = gql`
fragment completeTodo on TodoItem {
completed
}
`;
const todo = cache.readFragment({ fragment, id });
const data = { ...todo, completed: !todo.completed };
cache.writeData({ id, data });
return null;
61

State management. Query
{
todos @client {
id
completed
text
}
visibilityFilter @client
}
62

State management
63

Performance
64

Performance
Optimization points:
• Do not send full query to server
• Cache read requests
• Cache entities on client
• Prefetch entities
• Batch requests
65

Performance. Automatic Persisted Queries
66

curl -g
'http://localhost:9011/graphql?extensions={"persistedQuery":{"version":1,"sha256Hash":"
ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38"}}'
67

Client: apollo-link-persisted-queries
Server:
const server = new ApolloServer({
typeDefs,
resolvers,
persistedQueries: {
cache: new InMemoryCache(),
},
});
68

Performance. CDN integration
createPersistedQueryLink({ useGETForHashedQueries: true })
___
type Author @cacheControl(maxAge: 60) {
id: Int
firstName: String
lastName: String
posts: [Post] @cacheControl(maxAge: 180)
}
69

Performance. Client caching
• Data is normalized and cached by default
• Update mutation updates cached automagically
• Create mutation requires manual cache writes
70

Performance. Client caching
<Mutation
mutation={ADD_TODO}
update={(cache, { data: { addTodo } }) => {
const { todos } = cache.readQuery({ query: GET_TODOS });
cache.writeQuery({
query: GET_TODOS,
data: { todos: todos.concat([addTodo]) }
});
}}
>
Variables! (@connection)
71

Performance. Client caching: cacheRedirects
const cache = new InMemoryCache({
cacheRedirects: {
Query: {
book: (_, args, { getCacheKey }) =>
getCacheKey({ __typename: 'Book', id: args.id })
},
},
});
72

Performance. Prefetching
<Component
onMouseOver={() =>
client.query({
query: GET_DOG,
variables: { breed: data.breed }
})
}
/>
73

Performance. Batch requests
import { BatchHttpLink } from "apollo-link-batch-http";
const link = new BatchHttpLink({ uri: "/graphql" });
74

Testing React components
75

Testing React Components
const mocks = [
{
request: {
query: GET_DOG_QUERY,
variables: {
name: 'Buck',
},
},
result: {
data: {
dog: { id: '1', name: 'Buck', breed: 'bulldog' },
},
},
},
];
76

Testing React Components
it('renders without error', () => {
renderer.create(
<MockedProvider mocks={mocks} addTypename={false}>
<Dog name="Buck" />
</MockedProvider>,
);
});
77

Testing React Components: Loading state
By default
78

Testing React Components: Success state
it('should render dog', async () => {
// ...
await wait(0); // wait for nextTick
// ...
});
79

Testing React Components: Error state
const dogMock = {
request: {
query: GET_DOG_QUERY,
variables: { name: 'Buck' },
},
error: new Error('aw shucks'),
};
80

Server-side rendering
81

getDataFromTree(App).then(() => {
const content = ReactDOM.renderToString(App);
const initialState = client.extract();
const html = <Html content={content} state={initialState} />;
res.status(200);
res.send(`<!doctype html>n${ReactDOM.renderToStaticMarkup(html)}`);
res.end();
});
82

function Html({ content, state }) {
return (
<html>
<body>
<div id="root" dangerouslySetInnerHTML={{ __html: content }} />
<script dangerouslySetInnerHTML={{
__html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g,
'u003c')};`,
}} />
</body>
</html>
);
}
83

Server-side rendering. Avoid network calls
ssrMode: true,
link: new SchemaLink({ schema }),
cache: new InMemoryCache(),
});
84

Server-side rendering. Skipping queries
const ClientOnlyUser = () => (
<Query query={GET_USER_WITH_ID} ssr={false}>
{({ data }) => <span>I won't be run on the server</span>}
</Query>
);
85

Server-side rendering. Rehydration
cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
link,
});
86

Apollo 2.1
87

Apollo 2.1
<Query> / <Mutation> / <Subscription>
<ApolloConsumer />
Apollo Devtools
88

Relay
89

Relay
https://open.nytimes.com/the-new-york-times-now-on-apollo-
b9a78a5038c
“Relay takes a “bring your own solution” approach to this
problem. In Apollo, SSR is a first-class feature. This is huge
for us.”
90

Conclusion
91

Conclusion
Apollo is a fully-featured open-source* platform
92

Questions?
93

Apollo ecosystem

More Related Content

What's hot (20)

Similar to Apollo ecosystem (20)

Recently uploaded (20)

Apollo ecosystem