New TypeScript definitions broken + cause critical slowdowns of the language server #786
Comments
|
I've been able to use the types without loss of information (but have seen the TS server slowdown mentioned in VS code) without casting to Some helper file: import { QueryProps as QP } from 'react-apollo';
import { ApolloQueryResult, MutationQueryReducersMap } from 'react-apollo';
import { DataProxy } from 'apollo-client/data/proxy';
interface MutationOpts<T> {
variables?: Object;
optimisticResponse?: Object | Function;
updateQueries?: MutationQueryReducersMap;
refetchQueries?: string[] | /*PureQueryOptions*/any[];
update?: (proxy: DataProxy, data: { data: T }) => void;
}
export type MutationFunc<T> = (options: MutationOpts<T>) => Promise<ApolloQueryResult<T>>;
export type QueryProps<P, R> = P & {
data: QP & R;
}and in my components: interface MyResults {
currentUser: IServerUserResponse;
}
interface MyProps {
exposedProp: boolean;
}
interface MyMutations {
login: MutationFunc<IServerUserResponse>;
}
interface MyState {
searchQuery: string;
}
type MyPropsType = QueryProps<MyProps & MyMutations, MyResults>;
export default graphql<MyResults, MyProps>(query, opts)(class ApolloComponent extends React.Component<MyPropsType, MyState> {
...
})Where import ApolloComponent from './component';
import * as React from 'react';
React.render(
<ApolloComponent exposedProp />
);where omitting Note that if you were using Apollo's export default compose(
graphql<MyResults, MyProps>(query, opts),
graphql<MyResults, MyPropsType>(mutationQuery, { name: "login" })
)(class ApolloComponent extends React.Component<MyPropsType, MyState> {... })I will note that clicking to definition on the |
|
Any updates on this @helfer @stubailo @jbaxleyiii? Still stuck pre 1.4.0 because of this. Also, I noticed that one of your tests has a typo in it that should render the test broken. This leads me to believe that these tests aren't actually being ran? Here's the typo from the link above: - class Container extends React.Component<any, any> {8
+ class Container extends React.Component<any, any> { |
|
I'll also note that the current definitions do not include the |
|
@skosch I don't think so. Those issues seem to be stemmed from incomplete typings and improper explicit types. A lot of our headaches could be solved if the typescript language server had stronger type inference built into it but unfortunately we need to keep annotating the types for invocations of the |
|
Hi, I think the editor problems are strictly not related to react-apollo, but to the experimental decorator feature. I had problems using other decorators from other libs, and switching the syntax from decorator to normal curry solves any perf problem, both with react-apollo and with other decorators. I can reproduce this quite reliably |
|
@dsifford I've started working on some of this now! I'm not 100% how to get around the crashing? Maybe by moving the types to a different file and importing them? I can give that a try and see if it helps! I'm currently working on the react typings bug that is preventing people from using the latest! I'll keep you posted on progress! |
|
@jbaxleyiii 🙏 You are awesome. Many thanks for all your hard work! If there's anything you'd like me to assist with, let me know and I'd be happy to help where needed / able. |
|
@jbaxleyiii I finally got around to looking at both your changes and the associated blog post you wrote. Thanks for taking the time to do that. Unfortunately, it is looking like your changes will still not work for me. Your blog post describes in great detail on how to apply the changes to stateless functional components. However, it makes no mention on how to apply these changes to stateful component classes (i.e. There are some areas in my application where I cannot use functional components as the components carry state. In these circumstances, no matter what I do I get the following errors... Without any type casting (
|
|
@dsifford I'm so sorry to hear this! What about the class methods listed here http://dev.apollodata.com/react/using-with-types.html#classes-vs-functions Does that help? |
|
@jbaxleyiii Thanks for the response. The docs you've linked to provide further clarification. I'm pretty sure that way will work. However, I'm going to still continue stubbing the types because I still don't see how casting merged props from the decorator into the component is any better than just merging the props and explicitly setting There very well might be situations that your way provides a clear benefit, but for my application, the API is fairly simple and doesn't require all the extra complex sugar. Thanks again for taking the time to respond. |
|
I'm currently running into the same issue with slowdowns of the language server. Is there anything I can do to work around? |
|
Slowdowns are happening for me too in Sublime Text. Today was the first day it crashed on me! Not only is it slow, but the example from the documentation doesn't seem to be working. I get the following errors: Using the following code: Click me to see the codeimport * as React from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
export const GROUPS_QUERY = gql`
query self {
groups {
name
name_id
}
}
`
type MemberedGroup = {
name: string,
name_id: string
}
type Response = { self: { groups: MemberedGroup[] } }
const withGroupData = graphql<Response>(GROUPS_QUERY, {})
export default withGroupData(({ data: { loading, error, self } }) => {
if (loading) return <div>Loading...</div>
if (error) return <h2>ERROR!</h2>
return <div className="my-groups"></div>
}). and using the following package versions:
|
|
I have some Here's the full file on Google Drive. Let me know if you can make any sense of it. |
|
This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo! |
|
+1 here |
|
This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo! |
|
This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo! |
|
@alexzielenski |
Opening this issue from per the request of @jbaxleyiii in #695 (comment)
The Gist
My personal issue in detail can be found in #695. In short, here's the issues I'm experiencing:
1. The nested deeply-dependent type definitions are causing Visual Studio Code to freeze on any file that contains the
graphqlfunction provided by this library.graphqlfunction, my editor crashes completely.2. Types will not compile even after adjusting the code in my application.
3. The tests for the new type definitions are being tested against components that all have the
anytype for bothPropsandState, which seems dangerous.[Click me] Literally every query test case is affected by this potentially dangerous type casting.
Suggestions
Aside from fixing the compile issues and the
anytype casting described above, perhaps there might be a way to make the type dependency chain not so long? This singular problem I think is the issue for users (like me) who depend on realtime type checking using the typescript language server. (This is a standard feature in Visual Studio Code).Steps to Reproduce
(This should be the easiest thing to reproduce from the list of issues I described above).
Version
Final Notes
I'm happy to help in any way I can. Regardless of these issues, you all deserve a huge high-five for such amazing work on the apollo platform. It seriously has made my API development experience much more enjoyable! Thanks for all you and the rest of apollo team do! 😄 👏
The text was updated successfully, but these errors were encountered: