GraphQL erfolgreich im Backend einsetzen. Einleitung zu GraphQL vom Dev Day Online 2020.

2. ▪
▪
▪
▪
▪
▪
▪

4. type User {
id: Int!
name: String!
friends: [User!]!
}
type Query {
user(id: Int!): User
}
type Mutation {
setUserName(id: Int!, name: String!): User
}

5. query {
user(id: 1) {
id
name
}
}
{
"data": {
"user": {
"id": 1,
"name": "Luke Skywalker"
}
}
}

7. const app = express();
app.use( "/graphql", graphqlHTTP({
schema,
rootValue,
graphiql: true
}));
app.listen(
4000,
() => console.log("Listening on port 4000")
);

8. query {
user(id: 1) {
id
name
friends {
id
name
}
}
}
const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};

9. query {
user(id: 1) {
id
name
friends {
id
name
}
}
}
const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};

10. query {
user(id: 1) {
id
name
friends {
id
name
}
}
}
const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};

11. query {
user(id: 1) {
id
name
friends {
id
name
}
}
}
const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};

12. query {
user(id: 1) {
id
name
friends {
id
name
}
}
}
const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};

13. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

14. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

15. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

16. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

17. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

18. const rootValue = {
user: ({ id }) => {
const dummyUser = {
id: () => id,
name: "dummy-user",
friends: () => [dummyUser, dummyUser],
};
return dummyUser;
},
};
query {
user(id: 1) {
id
name
friends {
id
name
}
}
}

19. const rootValue = {
user: async ({ id }) => {
const userRow = await userQueries.getById(id);
return {
id: id,
name: userRow.name,
friends: () => getFriendsOfUser(id),
};
},
};

20. async function getFriendsOfUser(id) {
const friendIds = await userQueries.getFriendIds(id);
const friendUserRows = await userQueries.getByIds(friendIds);
return friendUserRows.map((friend) => ({
id: friend.id,
name: friend.name,
friends: () => getFriendsOfUser(friend.id),
}));
}

21. ▪
▪
▪
▪
▪

23. ▪ ▪
▪
▪
▪
▪

25. function getByIds(ids) {
return db.all(
`
SELECT *
FROM user
WHERE id IN (${new Array(ids.length).fill("?").join(", ")})
`,
ids,
);
}

27. async function preloadUsersById() {
usersById = {};
const userRows = await userQueries.getAll();
userRows.forEach((u) => {
usersById[u.id] = { ...u, friends: [] };
});
const friendPairs = await userQueries.getFriendPairs();
friendPairs.forEach(([a, b]) => {
usersById[a].friends.push(usersById[b]);
usersById[b].friends.push(usersById[a]);
});
return usersById;
}

29. const dataLoader = new DataLoader(async (userIds) => {
const userRows = await userQueries.getByIds(userIds);
return userRows.map((userRow) => ({
...userRow,
friends: () => this.friendsByUserIdDataLoader.load(userRow.id),
}));
});
// later
dataLoader.loadMany([1, 2, 3])
dataLoader.loadMany([2, 4, 5])

30. ▪ ▪
▪
▪
▪
▪
▪ →