Types End-to-End @ samsara

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

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

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

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

a simple example
# server_schema.graphql:
type Device {
name: string!;
}
type Root {
}

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

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

oh no
}
query: ...,
variables: {
deviceId: 202152006793,
},
}));

typing it all out (by hand)
type Device {
name: string!;
}
type Root {
}
device(id: $id) {
name
}
}

typing it all out
}
query: ...,
variables: {
deviceId: 202152006793,
},
}));

typing it all out (with typescript!)
const DeviceNameComponent = (props: Props) => {
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryInputVariables>
(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
})
);

typing it all out with typescript!
}
export default connectGraphQL<Props, DeviceNameQuery, DeviceNameQueryVariables>
(DeviceNameComponent, () => ({
query: ...,
variables: {
deviceId: 202152006793,
},
})
);

this works pretty well, but...

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
}
}

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,
},

hmm...
type Device {
name: string!;
}
type Root {
}
device(id: $id) {
name
}
}
// generated_types.d.ts
type DeviceNameQueryInputVariables = {
id: number;
}
type DeviceNameQuery = {
device: {
name: string;
}
}

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

how does codegen work?
type Device {
name: string!;
}
type Root {
}
device(id: $id) {
name
}
}

type Device {
name: string!;
}
type Root {
}
device(id: $id) {
name
}
}
type DeviceNameQueryInputVariables = {
id: number;
}

type Device {
name: string!;
}
type Root {
}
device(id: $id) {
name
}
}
type DeviceNameQuery = {
device: {
name: string;
}
}

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

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

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

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
})

golang types
Id int64
Name string
// ...
}
return user, err
})
type Device {
name: string!;
id: number;
// ...
}
type Root {
}

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

golang types
Id int64
Name string
// ...
}
return user, err
})
type Root {
}

golang types
Id int64
Name string
// ...
}
return user, err
})
type Device {
name: string!;
id: number;
// ...
}

$ go run schema_generator.go > schema.graphql

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

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

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

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

autocomplete, go to def, outlines in your {.pb.go, .go, .graphql, .tsx}.

a type can travel from the hardware device to the web application.

available in an open source repository near you.

a powerful default. let the computer do the busy work for you.

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

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

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

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)

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

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;

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)

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

Types End-to-End @ samsara

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Types End-to-End @ samsara

Similar to Types End-to-End @ samsara (20)

Recently uploaded

Recently uploaded (20)

Types End-to-End @ samsara

Editor's Notes