▪
▪
▪
▪
▪
▪
▪
type User {
id: Int!
name: String!
friends: [User!]!
}
type Query {
user(id: Int!): User
}
type Mutation {
setUserName(id: Int!, name: String!): User
}
query {
user(id: 1) {
id
name
}
}
{
"data": {
"user": {
"id": 1,
"name": "Luke Skywalker"
}
}
}
const app = express();
app.use( "/graphql", graphqlHTTP({
schema,
rootValue,
graphiql: true
}));
app.listen(
4000,
() => console.log("Listening on port 4000")
);
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;
},
};
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;
},
};
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;
},
};
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;
},
};
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;
},
};
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
}
}
}
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
}
}
}
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
}
}
}
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
}
}
}
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
}
}
}
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
}
}
}
const rootValue = {
user: async ({ id }) => {
const userRow = await userQueries.getById(id);
return {
id: id,
name: userRow.name,
friends: () => getFriendsOfUser(id),
};
},
};
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),
}));
}
▪
▪
▪
▪
▪
▪ ▪
▪
▪
▪
▪
function getByIds(ids) {
return db.all(
`
SELECT *
FROM user
WHERE id IN (${new Array(ids.length).fill("?").join(", ")})
`,
ids,
);
}
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;
}
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])
▪ ▪
▪
▪
▪
▪
▪ →
Andreas Roth - GraphQL erfolgreich im Backend einsetzen

Andreas Roth - GraphQL erfolgreich im Backend einsetzen

  • 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) { returndb.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.