-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add jscodeshift transform for v2->v3 migration #6486
Add jscodeshift transform for v2->v3 migration #6486
Conversation
@dminkovsky: Thank you for submitting a pull request! Before we can merge it, you'll need to sign the Apollo Contributor License Agreement here: https://contribute.apollographql.com/ |
91c2206
to
5c7e847
Compare
This is a really great idea! Of course I'm biased because I've been involved with |
Haha I noticed that after I saw that you added a tag to this issue yesterday. Thanks for recast! Really beats using sed. Wouldn't want to do something like this any other way. |
@dminkovsky @benjamn Any idea when we can expect this one? |
168e32a
to
0934d7a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on this @dminkovsky and @jcreighton! This is a great start, and we can definitely add more to this over time. I've listed a few small formatting nit's, but I do think we should also mention this in the migration guide somewhere. Maybe add a new level 3 section under ## Installation
, that mentions we have a codemod to help with the AC2 -> AC3 transition, along with a super quick synopsis of what the codemod will take care of (and of course, how to call it). Thanks for working on this!
Awesome to see this rounded out, thanks a lot @jcreighton. I gave myself a hard time limit to work on this when I wrote my original version, and I'm sorry I couldn't finish this. I think this will help a lot of people do the migration with confidence. It's been quite smooth for me. Definitely makes sense to mention it prominently at the migration guide—jscodeshift is awesome. PS. Feel free to squash my two commits into one if you guys economize on commits. Would be nice to have at least one though :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey, I was working on a similar tool yesterday prior to seeing this PR and sent PR #6721 instead. Left some feedback on the approach taken here as suggested by @benjamn. I believe this utility would be a lot more useful if a lot more of the import mappings were added (such as from react-apollo
, apollo-boost
, etc.). Here's the list of mappings that I made (based on the Apollo migration docs and some internal imports from my codebase):
apollo-client/src/utilities/codemods/modifyImportsApollo3.ts
Lines 40 to 158 in 4248e92
// Import mappings obtained from | |
// https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#updating-imports. | |
// Note: order of execution is important. | |
addImportMapping({ from: "@apollo/react-hooks", to: "@apollo/client", imports: "*" }); | |
addImportMapping({ | |
from: "@apollo/react-components", | |
to: "@apollo/client/react/components", | |
imports: "*", | |
}); | |
addImportMapping({ from: "@apollo/react-hoc", to: "@apollo/client/react/ssr", imports: "*" }); | |
addImportMapping({ from: "@apollo/react-testing", to: "@apollo/client/testing", imports: "*" }); | |
addImportMapping({ | |
from: "react-apollo", | |
to: "@apollo/client", | |
imports: ["ApolloProvider", "MutationFunction", "useQuery", "useLazyQuery", "useMutation"], | |
}); | |
addImportMapping({ | |
from: "apollo-boost", | |
to: "@apollo/client", | |
imports: [ | |
"ApolloClient", | |
"HttpLink", | |
"InMemoryCache", | |
"NormalizedCacheObject", | |
"Resolvers", | |
"defaultDataIdFromObject", | |
"gql", | |
], | |
}); | |
addImportMapping({ | |
from: "apollo-client", | |
to: "@apollo/client", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-cache", | |
to: "@apollo/client/cache", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-cache-inmemory", | |
to: "@apollo/client/cache", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link", | |
to: "@apollo/client/utilities", | |
imports: ["getOperationName"], | |
}); | |
addImportMapping({ | |
from: "apollo-link", | |
to: "@apollo/client", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-http", | |
to: "@apollo/client", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-http-common", | |
to: "@apollo/client", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-batch", | |
to: "@apollo/client/link/batch", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-batch-http", | |
to: "@apollo/client/link/batch-http", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-context", | |
to: "@apollo/client/link/context", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-error", | |
to: "@apollo/client/link/error", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-retry", | |
to: "@apollo/client/link/retry", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-link-ws", | |
to: "@apollo/client/link/ws", | |
imports: "*", | |
}); | |
addImportMapping({ | |
from: "apollo-utilities", | |
to: "@apollo/client/utilities", | |
imports: "*", | |
}); |
bbd38f4
to
5e85ce0
Compare
Thank you @bnjmnt4n & @henryqdineen! I've updated this codemod with your suggestions! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some nitty/gritty final recommendations—I think we're getting very close!
40e5a13
to
2516992
Compare
2edc0c2
to
8c73955
Compare
753e07b
to
6dc7a52
Compare
Co-authored-by: Ben Newman <ben@benjamn.com>
Default exports can be imported by name: import { default as Client } from "apollo-client" which is equivalent to import Client from "apollo-client" With this commit, both of these styles to get transformed to import { ApolloClient as Client } from "@apollo/client"
Ideally we would have actual input/output tests, but for these examples seem like a good start.
This makes sense because codemods are not really part of the Apollo Client library, and should fix TypeScript errors caused by the example files.
6dc7a52
to
38882ca
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! @jcreighton I'll leave it to you to merge (with a merge commit, not squash or rebase) whenever you're ready.
I began migrating v2 to v3 today and decided to write a jscodeshift transform for some of the rote elements of this migration that do not need to be done by hand. Not sure if this belongs in the repo, but thought I would share it and perhaps others will expand? So far it does this:
Anything else in this migration that can be dependably automated?
Thank you.
PS. You can play with this over at https://astexplorer.net: