Apollo Client Libdef (also add to react-apollo) #2172

TLadd · 2018-05-05T17:23:01Z

Add some more tests
Resolve interop with the current react-apollo libdef.

It seems that since the react-apollo libdef is importing types from apollo-client (which doesn't have types), even if I include this apollo-client libdef in my project, types that react-apollo imports end up getting clobbered to any. Either need to

stop importing those types in react-apollo libdef or
actually use the types added here.

Actually using the types is definitely the endgame, but might be a large effort that could be split to another PR.

gantoine · 2018-05-09T14:07:51Z

Are the checklist items TODOs, or are they done?

TLadd · 2018-05-09T14:30:48Z

They are TODOs. Sorry for the confusion.

budde377 · 2018-05-10T08:35:14Z

@TLadd let me know when you're ready for a review and I'll gladly abide. Regarding the imports; considering the poor support for inter libdef dependencies (ref #16) I'm really starting to think that the imports should be removed and the types duplicated. I'm planning on removing all the imports from react-apollo and clean up duplicate declarations during the next week.

TLadd · 2018-05-10T12:31:14Z

Yeah, from #1857 (comment), it appears that even if the imports worked, the tests wouldn't. Just duplicating the types react-apollo needs is probably the path of least resistance at the moment. I think as long as we distinguish clearly in the file where the types are actually coming from (this section is actually react-apollo, this section is types from apollo-client, etc) maintenance won't be that bad.

Sorry this has been stagnating a bit; I'll have some time over the weekend to make a push and should get it to a mergeable state.

budde377 · 2018-05-10T13:04:50Z

Yes, that sounds like a good plan!

…

On Thu, May 10, 2018, 14:31 Thomas Ladd ***@***.***> wrote: Yeah, from #1857 (comment) <#1857 (comment)>, it appears that even if the imports worked, the tests wouldn't. Just duplicating the types react-apollo needs is probably the path of least resistance at the moment. I think as long as we distinguish clearly in the file where the types are actually coming from (this section is actually react-apollo, this section is types from apollo-client, etc) maintenance won't be that bad. Sorry this has been stagnating a bit; I'll have some time over the weekend to make a push and should get it to a mergeable state. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2172 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADVCy_r3FxbRnUgZy4OXVRTqiZUAVHNTks5txDMTgaJpZM4TzuC7> .

…raphql/apollo-client/blob/54a6d2234463d08dab31be3fc6dcc99cd7eccc98/src/index.js.flow

…apollo Add more tests for Query and Mutation components Add tests for ApolloProvider and ApolloConsumer

TLadd · 2018-05-13T03:54:30Z

@budde377 @gantoine think this is ready for a look. I copied the types from apollo-client into react-apollo as well. Sorry for the diff size.

I'm not sure how fun keeping the types in apollo-client and react-apollo in sync will be. I'm hoping it's not too bad, since it is just a matter of copy/pasting them over. If it gets to be too much of a pain, I'm not opposed to abandoning apollo-client and just maintain everything in react-apollo. At least in my projects, the only place I'm using apollo-client directly is to initialize the client (hence the tests checking ApolloClient's initialization). So not a huge deal, but I think they're worth having around if it's easy.

Added some tests focused around the Query and Mutation props I'm using.

Also some stylistic changes in the PR caused by prettier, just using the default config. I'm fine shifting the style some if there are complaints, but would prefer it be prettier-able.

Pulled both these libdefs into the project I'm using react-apollo in and seems to be behaving correctly.

Definitely still room for improvement in places, but hopefully a good step.

budde377 · 2018-05-13T11:05:22Z

Nice! I can prob. do a review monday afternoon (CET) :)

budde377 · 2018-05-14T14:39:56Z

definitions/npm/react-apollo_v2.x.x/flow_v0.58.x-/react-apollo_v2.x.x.js

+  /** End From graphql */
+
+  declare export interface ApolloProviderProps<TCache> {
+    client: any; // ApolloClient<TCache>;


Any or apollo client?

The trouble with using ApolloClient is that it's a class and it's nominally typed. So even though ApolloClient is the same in both the apollo-client and react-apollo libdefs, they are different types. We could maybe make it work with an interface in react-apollo, but didn't think it was worth it to diverge from what is defined in apollo-client.

I see... Let's leave it as is for now.

budde377

Nice work! I do not mind your style changes and love the extensions to the test suite. This libdef also works in my projects. I'll approve 👍

TLadd · 2018-05-14T21:56:30Z

@gantoine Looks like this is ready for you whenever you get the time. Thanks!

jedwards1211 · 2018-08-02T07:23:28Z

@TLadd using data: TData | {||} | void no longer works with recent versions of Flow; it errors on any property you try to access on data, because no properties are present in {||}, and recent versions of Flow no longer allow any kind of untyped property access, even in existence checks. (Without casting to any or Object at least)

Are you sure Apollo can pass an empty object?

If so would you be okay with us changing this to ?$Shape<TData>?

jedwards1211 · 2018-08-02T21:40:17Z

Example of the problem (Try flow link):

@flow
type Data = {foo: number} | {||}

function getFoo(data: Data): ?number {
  return data.foo
}

4:   return data.foo
                 ^ Cannot get `data.foo` because property `foo` is missing in object type [1].
References:
3: function getFoo(data: Data): ?number {
                         ^ [1]

… of flow react-apollo passes an empty object before data is loaded; data will never be undefined. However, using `| {||}` just isn't going to work with recent versions of flow (see flow-typed#2172 (comment)) I think `$Shape<TData>` is the only viable option here.

TLadd · 2018-08-02T21:51:08Z

I believe this has always been the case (you still get an error if you select older versions of flow as well).

I'm typically checking that values are present when I'm accessing them, and it removes the type errors. This works for instance:

type Data = {foo: number} | {||}

function getFoo(data: Data): ?number {
  if (data.foo) {
  	return data.foo 
  }
  return null
}

Having said that, it may be reasonable to change data to just be TData | void. The | {||}, while correct, doesn't buy much.

jedwards1211 · 2018-08-02T21:52:48Z

@TLadd actually I read the react-apollo source, it never passes an undefined value, not anymore at least.

I didn't realize flow has that obscure exception for checking if an object is exact empty or not. Thanks for pointing that out.

Quite subtle because if (data.foo) does error if type Data = {||}...

TLadd · 2018-08-02T21:59:19Z

@jedwards1211 There is actually still one case where undefined gets passed in: apollographql/react-apollo#1977

Typescript actually types data as TData | undefined (https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L97) because they couldn't figure out a way to get the equivalent of {||}. It's possible that we should follow suit and just do TData | void; might make it a little more user friendly, since that error you were showing in that example can be a bit confusing.

The only trouble with doing that is suddenly

if (data) {
  data.field.whatever
}

would typecheck, since the if check would refine it to type TData, but it might actually be the empty object.

jedwards1211 · 2018-08-02T22:06:36Z

Ah right. Argh...

ganemone · 2018-10-18T17:34:22Z

@TLadd using data: TData | {||} | void no longer works with recent versions of Flow; it errors on any property you try to access on data, because no properties are present in {||}, and recent versions of Flow no longer allow any kind of untyped property access, even in existence checks. (Without casting to any or Object at least)

Are you sure Apollo can pass an empty object?

If so would you be okay with us changing this to ?$Shape<TData>?

I think we can actually fix this using $ObjMap (try flow link)

I will submit a PR.

jedwards1211 · 2018-10-18T18:20:09Z

@ganemone ~~I don't get it, the way you're using $ObjMap does almost same thing as $Shape right?~~
Huh, nevermind, using $Shape bizarrely doesn't cause the intended error, but $ObjMap does...

jedwards1211 · 2019-03-13T17:48:57Z

@TLadd I don't think you were the one to introduce this, but can a MutationFunction really resolve to undefined? The return type is Promise<void | FetchResult<...>> which adds another pesky null check I really wish I could avoid.

TLadd · 2019-03-13T19:11:31Z

It's the same in the typescript defs: https://github.com/apollographql/react-apollo/blob/master/src/Mutation.tsx#L62

Not sure; would have to look through the source to see how/if this can happen.

jedwards1211 · 2019-03-13T19:30:23Z

No worries, just wanted to check if you knew off the top of your head, thanks!

TLadd mentioned this pull request May 7, 2018

[react-apollo] Misc. react-apollo improvements #2180

Merged

TLadd force-pushed the trl/apollo-client branch 2 times, most recently from 4b99f47 to 1727d5e Compare May 8, 2018 00:30

gantoine self-assigned this May 9, 2018

gantoine added libdef Related to a library definition new labels May 9, 2018

gantoine added the work in progress label May 9, 2018

stackpathtladd2 added 4 commits May 11, 2018 21:33

Copy over apollo-client v1 flow types from https://github.com/apollog…

ca57800

…raphql/apollo-client/blob/54a6d2234463d08dab31be3fc6dcc99cd7eccc98/src/index.js.flow

Wrap apollo-client v1 definition in module and add declares

7e5ae30

Update Apollo Client type definition for 2.0

c30a426

apollo-client: Add tests for ApolloClient initialization

aea7959

TLadd force-pushed the trl/apollo-client branch from 7498df6 to aea7959 Compare May 12, 2018 02:34

[react-apollo and apollo-client] Copy apollo-client types into react-…

7e8c88f

…apollo Add more tests for Query and Mutation components Add tests for ApolloProvider and ApolloConsumer

TLadd changed the title ~~Apollo Client Libdef~~ Apollo Client Libdef (also add to react-apollo) May 14, 2018

budde377 reviewed May 14, 2018

View reviewed changes

budde377 approved these changes May 14, 2018

View reviewed changes

gantoine approved these changes May 14, 2018

View reviewed changes

gantoine merged commit e4ef32c into flow-typed:master May 14, 2018

eryon mentioned this pull request May 16, 2018

react-apollo causes flow-typed install to error #2226

Closed

jhpedemonte mentioned this pull request May 17, 2018

[apollo-client] "indexer property is missing" when calling apolloClient.query() #2233

Open

jedwards1211 mentioned this pull request Aug 2, 2018

fix(react-apollo): fix QueryRenderProps data type for recent versions of flow #2562

Closed

This was referenced Aug 7, 2018

react-apollo doesn't import graphql types from graphql #2588

Open

ApolloClient exported by react-apollo isn't compatible with ApolloClient exported by apollo-client #2589

Open

ganemone mentioned this pull request Oct 18, 2018

[react-apollo] Update type for QueryRenderProps #2854

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apollo Client Libdef (also add to react-apollo) #2172

Apollo Client Libdef (also add to react-apollo) #2172

TLadd commented May 5, 2018 •

edited

gantoine commented May 9, 2018

TLadd commented May 9, 2018

budde377 commented May 10, 2018

TLadd commented May 10, 2018

budde377 commented May 10, 2018 via email

TLadd commented May 13, 2018

budde377 commented May 13, 2018

budde377 May 14, 2018

TLadd May 14, 2018

budde377 May 14, 2018

budde377 left a comment

TLadd commented May 14, 2018

jedwards1211 commented Aug 2, 2018 •

edited

jedwards1211 commented Aug 2, 2018

TLadd commented Aug 2, 2018

jedwards1211 commented Aug 2, 2018 •

edited

TLadd commented Aug 2, 2018 •

edited

jedwards1211 commented Aug 2, 2018

ganemone commented Oct 18, 2018

jedwards1211 commented Oct 18, 2018 •

edited

jedwards1211 commented Mar 13, 2019 •

edited

TLadd commented Mar 13, 2019

jedwards1211 commented Mar 13, 2019

Apollo Client Libdef (also add to react-apollo) #2172

Apollo Client Libdef (also add to react-apollo) #2172

Conversation

TLadd commented May 5, 2018 • edited

gantoine commented May 9, 2018

TLadd commented May 9, 2018

budde377 commented May 10, 2018

TLadd commented May 10, 2018

budde377 commented May 10, 2018 via email

TLadd commented May 13, 2018

budde377 commented May 13, 2018

budde377 May 14, 2018

Choose a reason for hiding this comment

TLadd May 14, 2018

Choose a reason for hiding this comment

budde377 May 14, 2018

Choose a reason for hiding this comment

budde377 left a comment

Choose a reason for hiding this comment

TLadd commented May 14, 2018

jedwards1211 commented Aug 2, 2018 • edited

jedwards1211 commented Aug 2, 2018

TLadd commented Aug 2, 2018

jedwards1211 commented Aug 2, 2018 • edited

TLadd commented Aug 2, 2018 • edited

jedwards1211 commented Aug 2, 2018

ganemone commented Oct 18, 2018

jedwards1211 commented Oct 18, 2018 • edited

jedwards1211 commented Mar 13, 2019 • edited

TLadd commented Mar 13, 2019

jedwards1211 commented Mar 13, 2019

TLadd commented May 5, 2018 •

edited

jedwards1211 commented Aug 2, 2018 •

edited

jedwards1211 commented Aug 2, 2018 •

edited

TLadd commented Aug 2, 2018 •

edited

jedwards1211 commented Oct 18, 2018 •

edited

jedwards1211 commented Mar 13, 2019 •

edited