At Samsara, we use GraphQL to rapidly build new features. Samsara's platform has many moving pieces: gateways and sensors in the field, data processing backends, and our web and mobile applications. To keep things sane, we use static typing everywhere: Protobufs, Go, GraphQL, and TypeScript. In this talk we'll discuss how we use Thunder, our Go GraphQL server, apollo-codegen, and other tools to automatically glue these pieces together and make development easier with close to zero developer effort.

1. Types End-to-end
More Features And Fewer Bugs with GraphQL

2. hello, i'm stephen!

3. Samsara, end-to-end

4. Samsara, end-to-end

5. Samsara, end-to-end

6. Samsara, end-to-end

8. mo' features, mo' problems.

9. GraphQL Schema
type Device {
name: string!;
id: number!;
currentDriver: Driver;
locations: [Location!]!;
// ...
}
type Root {
device(id: number!): Device;
}

10. mo' features, mo' problems.
(mo' static types)

11. safety
editor tooling

12. safety
static verification at compile time and deployment
editor tooling
autocomplete, go to definition, type hints

13. GraphQL + TypeScript

14. a simple example
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}

15. a simple example
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

16. plain old javascript
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

17. oh no
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

18. oh no
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

19. oh no
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

20. oh no
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

21. ✨ typescript ✨

22. typing it all out (by hand)
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

23. typing it all out
const DeviceNameComponent = props => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
}));

24. typing it all out (with typescript!)
const DeviceNameComponent = (props: Props) => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryInputVariables>
(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
})
);

25. typing it all out with typescript!
const DeviceNameComponent = (props: Props) => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryVariables>
(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
})
);

26. typing it all out with typescript!
const DeviceNameComponent = (props: Props) => {
return <div>Name: {props.graphqlValue.device.fullName}</div>;
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryVariables>
(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
})
);

27. this works pretty well, but...

28. a simple example
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

29. uh oh
query VehicleInfo($deviceId: int64, $durationMs: int64!, $endMs: int64) {
device(id: $deviceId) {
id
name
currentDriver {
id
name
}
setPoint: objectStat(statType: SET_POINT) {
intValue
}
vehicleActivityReport(duration: $durationMs, endTime: $endMs) {
tripEntries {
start { address }
end { address }
}
}
...DashcamLatestImage
...CurrentStats
}
}

30. uh oh uh oh
query VehicleInfo($deviceId: int64, $durationMs: int64!, $endMs: int64) {
device(id: $deviceId) {
id
name
currentDriver {
id
name
}
setPoint: objectStat(statType: SET_POINT) {
intValue
}
vehicleActivityReport(duration: $durationMs, endTime: $endMs) {
tripEntries {
start { address }
end { address }
}
}
...DashcamLatestImage
...CurrentStats
}
}
type VehicleInfoQueryVariables = {
deviceId: number,
durationMs: number,
endM?: number,
};
type VehicleInfoQueryResult = {
device: {
id: number,
name: string,
setPoint: Array<number>,
vehicleActivityReport: {
start: {
address: string,
},
end: {
address: string,
},
} >,
},
lastDashcamEvent: {
reportType: number,
triggerTime: number,
urls: {
still: string,
},
} | null,
},

31. hmm...
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}
// generated_types.d.ts
type DeviceNameQueryInputVariables = {
id: number;
}
type DeviceNameQuery = {
device: {
name: string;
}
}

32. the graphql schema and typescript types can be mapped 1:1

33. ✨ apollo-codegen ✨

34. what is codegen?

35. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

36. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

37. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}
// generated_types.d.ts
type DeviceNameQueryInputVariables = {
id: number;
}

38. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

39. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

40. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}

41. how does codegen work?
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
device(id: number!): Device;
}
# device_name_query.graphql:
query DeviceName($id: number!) {
device(id: $id) {
name
}
}
// generated_types.d.ts
type DeviceNameQuery = {
device: {
name: string;
}
}

42. $ ts-node codegen.ts > schema.d.ts

43. typing without typing
const DeviceNameComponent = (props: Props) => {
return <div>Name: {props.graphqlValue.device.name}</div>;
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryVariables> (DeviceNameComponent, () =>
({
query: ...,
variables: {
id: 202152006793,
},
})
);

44. typing without typing
import { DeviceNameQuery, DeviceNameQueryVariables } from "./generated_types";
const DeviceNameComponent = (props: Props) => {
return <div>Name: {props.graphqlValue.device.name}</div>;
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryVariables> (DeviceNameComponent, () =>
({
query: ...,
variables: {
id: 202152006793,
},
})
);

45. data, end-to-end

46. shared type land

47. can we go further?

48. can we go further?

49. golang types
# graphqlschema/device.go
type Device struct {
Id int64
Name string
OrganizationId int64
// ...
}
type deviceArgs struct { Id int64 }
root.FieldFunc("device", func(ctx context.Context, args userArgs) (*Device, error) {
user, err := db.Device.Get(...)
return user, err
})

50. golang types
# graphqlschema/device.go
type Device struct {
Id int64
Name string
OrganizationId int64
// ...
}
type deviceArgs struct { Id int64 }
root.FieldFunc("device", func(ctx context.Context, args userArgs) (*Device, error) {
user, err := db.Device.Get(...)
return user, err
})
# server_schema.graphql:
type Device {
name: string!;
id: number;
// ...
}
type Root {
device(id: number!): Device;
}

51. the go type definitions and graphql schema can also be mapped 1:1

52. ✨ thunder + reflection ✨

53. golang types
# graphqlschema/device.go
type Device struct {
Id int64
Name string
OrganizationId int64
// ...
}
type deviceArgs struct { Id int64 }
root.FieldFunc("device", func(ctx context.Context, args userArgs) (*Device, error) {
user, err := db.Device.Get(...)
return user, err
})

54. golang types
# graphqlschema/device.go
type Device struct {
Id int64
Name string
OrganizationId int64
// ...
}
type deviceArgs struct { Id int64 }
root.FieldFunc("device", func(ctx context.Context, args userArgs) (*Device, error) {
user, err := db.Device.Get(...)
return user, err
})
# server_schema.graphql:
type Root {
device(id: number!): Device;
}

55. golang types
# graphqlschema/device.go
type Device struct {
Id int64
Name string
OrganizationId int64
// ...
}
type deviceArgs struct { Id int64 }
root.FieldFunc("device", func(ctx context.Context, args userArgs) (*Device, error) {
user, err := db.Device.Get(...)
return user, err
})
# server_schema.graphql:
type Device {
name: string!;
id: number;
// ...
}

56. $ go run schema_generator.go > schema.graphql

57. shared type land

58. shared type land

59. can we go further?

60. can we go further?

61. can we go further?

62. protobuf go generation
message TemperatureStat {
int64 time = 1;
double double_value = 3;
}

63. surprise! protobufs and go types can also, also be mapped 1:1

64. ✨ protoc-gen-go ✨

65. protobuf go generation
message TemperatureStat {
int64 time = 1;
double double_value = 3;
}

66. protobuf go generation
message TemperatureStat {
int64 time = 1;
double double_value = 3;
}
type TemperatureStat struct {
Time int64
DoubleValue float64
}

67. $ protoc-gen-go > stat.pb.go

68. shared type land

69. shared type land

70. type once, benefit everywhere.
schemas and typings can never be out of sync.

71. type once, benefit everywhere.
autocomplete, go to def, outlines in your {.pb.go, .go, .graphql, .tsx}.

72. type once, benefit everywhere.
a type can travel from the hardware device to the web application.

73. type once, benefit everywhere.
available in an open source repository near you.

74. type once, benefit everywhere.
a powerful default. let the computer do the busy work for you.

75. thank you!
twitter.com/stephencwan
github.com/samsarahq/thunder
questions?

76. bonus slides

77. the tools are there! we just need to add a little grease.

78. Never Type
Anything
Type TypeScript from
GraphQL
Type GraphQL from
Go
Type Go from
Protobufs

79. Type mapping is not always 1:1
● Union Types (supported ts, graphql, but not go)
● Enums Types (supported in ts, graphql, but not go)
● Number Types (float64 only in javascript)
○ A bit of a type safety problem, but we haven't hit the bounds of float64 in production yet.
○ We could also have a different over the wire representation for dealing with this
● Nullable Types (pointer types are not quite option types)
○ Error | Null | Value vs. (Null | Value, Error)

80. apollo-codegen: Autocomplete

81. what do we get out of static type checking?
● Type Safety
● Deployment Safety
● Autocomplete, Go to Definition

82. GraphQL: Deployment Safety

83. GraphQL: Deployment Safety

84. protobufs cont. (grpc systems behind graphql)
rpc UpdateDriverSafetyEvents(UpdateDriverSafetyEventsRequest) returns (UpdateDriverSafetyEventsResponse) {}
message DriverSafetyEventsRequest {
int64 org_id = 1;
repeated int64 device_ids = 2;
int64 end_ms = 3;
int64 start_ms = 4;
}
message DriverSafetyEvent {
int64 device_id = 1;
int64 harsh_event_ms = 2;
HarshEvent harsh_event = 3;
SafetyEventMetadataInboxState state = 4;
}
message DriverSafetyEventsRequest {
int64 org_id = 1;
repeated int64 device_ids = 2;
int64 end_ms = 3;

85. can we make this nicer?

86. Demands: more codegen
● What else can we do?
● extracting golang comments at compile time
● apollo-codegen with a go compilation target (i.e. for a graphql consumer api
service)

87. Demands: Better Type Interoperability
● Steps for code generation are still a little hard
● Need better ways of providing types across the board
● Providing Types: typescript/#3136