chore: update typescript example

examples/typescript/package.json

@@ -4,30 +4,38 @@
   "private": true,
   "main": "src/index.tsx",
   "dependencies": {
-    "@types/graphql": "0.x",
-    "apollo-cache-inmemory": "1.x",
-    "apollo-client": "2.x",
-    "apollo-link": "1.x",
+    "@apollo/client": "3.7.1",
     "apollo-link-rest": "0.x",
-    "graphql": "0.x",
-    "graphql-tag": "2.x",
-    "qs": "^6.6.0",
-    "react": "16.x",
-    "react-apollo": "2.x",
-    "react-dom": "16.x",
-    "react-scripts-ts": "2.x"
+    "graphql": "16.6.0",
+    "graphql-tag": "2.12.6",
+    "qs": "6.11.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "react-scripts-ts start",
-    "build": "react-scripts-ts build",
-    "test": "react-scripts-ts test --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "@types/jest": "23.x",
-    "@types/node": "10.x",
-    "@types/react": "16.x",
-    "@types/react-dom": "16.x",
-    "typescript": "2.9.x"
+    "@types/jest": "29.2.0",
+    "@types/node": "18.11.4",
+    "@types/react": "18.0.22",
+    "@types/react-dom": "18.0.7",
+    "typescript": "4.8.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

examples/typescript/src/Repo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { graphql, ChildProps } from 'react-apollo';
+import { graphql, ChildProps } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 // The Result type we expect back.
@@ -61,7 +61,9 @@ const query = gql`
 // we expect the shape of the response to be and OwnProps is what we
 // expect to be passed to this component.
 const Repo = graphql<Result, OwnProps>(query, {
+  // @ts-ignore
   options: ({ name }) => ({ variables: { name } }),
+  // @ts-ignore
 })(RepoBase);
 
 export { Repo };

examples/typescript/src/RepoSearch.tsx

@@ -30,6 +30,7 @@ class RepoSearch extends React.Component<{}, State> {
           <option value="react-apollo">React Apollo</option>
           <option value="apollo-client">Apollo Client</option>
         </select>
+        {/* @ts-ignore */}
         <Repo name={this.state.repo} />
       </div>
     );

examples/typescript/src/index.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { RestLink } from 'apollo-link-rest';
-import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloProvider } from 'react-apollo';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
 import { RepoSearch } from './RepoSearch';
 
@@ -18,9 +16,11 @@ const client = new ApolloClient({
   link,
 });
 
-render(
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+
+root.render(
   <ApolloProvider client={client}>
     <RepoSearch />
   </ApolloProvider>,
-  document.getElementById('root'),
 );