TBD

Outline

• What is graphql-codegen?
• What is Apollo? <-- This is sort of tangential. Can talk about the types w/o apollo
  • Just touch on this & react and link out, say it's a sidebar
• GraphQL types vs. Typescript Types
• Using the types from Graphql Codegen
  • Example query + screenshot perhaps
• Beauty of GraphQL: only query the fields you want!
  • Trim down query --> Type no longer matches!
  • OK For top level items, just use QueryReturnType['field']
  • But what about for nested fields?
• Options:
  1. Always query all fields <-- boo yuck
  2. build a new type with the fields I want from the state & declare that my function returns an item of that type <-- why are we generating types if we're not going to use them?
  3. use Partial & just make all fields optional <-- inaccurate & requires null checks everywhere
  4. break that type into a separate gql fragment, which I believe would then be accessible as a type to use directly

THis works

type Foo = {
  bars: Array<Bar>;
};
type Bar = {
  baz: String;
};

const x: Foo["bars"][0]["baz"] = "123";

but it's pretty ugly & won't be reusable

Sequoia McDowell 7:38 PM I am still mulling over the “how to use types for queries that only query some fields” question…

❓ WHY NOT JUST ACCESS THE PROPERTY? Like TrackingStatusFragment[‘courier’] —> This works for single properties but not for arrays 7:38 PM for example, this is my fragment for the TrackingOrderStatus (which I use in the Order query to get the stuff for that component) export type TrackingOrderStatusStuffFragment = ( { typename?: 'Job' } & { courier: Maybe<( { typename?: 'Courier' } & Pick & { img: Maybe<( { typename?: 'Image' } & Pick )>, vehicle: Maybe<( { typename?: 'Vehicle' } & Pick )> } )>, pickupInfo: ( { typename?: 'LocationInfo' } & Pick & { img: Maybe<( { typename?: 'Image' } & Pick )> } ), trackingDisplayInfo: Maybe & { tooltip: Maybe<( { **typename?: 'Tooltip' } & Pick )> } )>> } );

7:40 PM now when I have a function that looks through the trackingDisplayInfo array to pick out the active one (we get all statuses or something, and just find the active one), the type I’m passing to that function getActiveTrackingDisplayInfo is TrackingOrderStatusStuffFragment['trackingDisplayInfo'] (I think)

7:40 PM but the one status item that gets returned is an item in this array: trackingDisplayInfo: Maybe & { tooltip: Maybe<( { **typename?: 'Tooltip' } & Pick )> } )>>

7:40 PM and if it’s possible to reference this type directly, I don’t know how

7:42 PM SentryAPP 7:42 PM

TypeError SyntaxError: Unexpected token '<'  BUYER-WEB-PROD-1MH7 via Will Sabransky | Jan 10th Resolve... Ignore

7:42 PM Sequoia McDowell 7:42 PM some options:

• build a new type with the fields I want from the state & declare that my function returns an item of that type
• use Partial & just make all fields optional
• break that type into a separate gql fragment, which I believe would then be accessible as a type to use directly

7:47 PM some opinions:

• Building new types all over the place to represent the same data strikes me as a smell. Limits reuse, it’s clutter, and why the heck are we generating all these types just to not use them? We’ve gone to some trouble to have all this autogenerated stuff, let’s use it I say. 
• I don’t like this one either–it forces me to do even more field checks for fields I know to be present (since I’ve marked everything optional) and more importantly it’s inaccurate. I’m marking even more fields as “maybe” being present which I know to not be present… at this point just use any
• This feels a bit like the tail wagging the dog (structuring our fragments just to get certain types) but 
• I think it’s the best of the 3

7:48 PM option 4 is of course “always query all required fields for a type” which would screw up one of the main benefits we’re getting from graphQL now which is tailoring queries to reduce bandwidth usage (I think)

7:49 PM I’m currently doing 2 but I don’t like it. I feel like this is sort of fundamental aspect of using types generated from graphql & I/we are going to run into issues like this a lot as we use the generated types, and that’s why I’m giving it more thought & attention. (if it were just a 1 off I wouldn’t worry about it).

7:49 PM I plan to try 3

7:58 PM Sequoia McDowell 7:58 PM OK that worked 

7:58 PM fragment TrackingOrderStatusStuff on Job { courier { displayName # avatar img { templatedUrl # avatar } # for line 2 vehicle { make model color } } pickupInfo { displayName # avatar title img { templatedUrl # avatar } } trackingDisplayInfo { ...orderStatusInfo } }

fragment orderStatusInfo on TrackingInfo { active state # to find "terminal" states for progress bar title subtitle tooltip { title # for line 2 subtitle # for modal } }

7:59 PM export type OrderStatusInfoFragment = ( { typename?: 'TrackingInfo' } & Pick & { tooltip: Maybe<( { typename?: 'Tooltip' } & Pick )> } );

const getActiveStatus = (statuses: Array): OrderStatusInfoFragment|undefined => { return statuses.find(status => status && status.active); }