json-server\u3068\u306f\u9055\u3063\u3066\u3001\u5225\u30d7\u30ed\u30bb\u30b9\u3092\u7acb\u3066\u308b\u5fc5\u8981\u304c\u306a\u3044\u3068\u3044\u3046\u306e\u304c\u500b\u4eba\u7684\u306a\u63a8\u3057\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n
\u74b0\u5883<\/h2>\n\n\n\n2022\/8\/27\u6642\u70b9<\/div>\n\n\n\n\n- MacBook Pro (2019late)\n
\n- Monterey v12.5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
\u79c1\u306fReact\uff08TypeScript\uff09\u3067\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u306e\u3067\u4ee5\u4e0b\u304c\u4e3b\u8981\u306a\u5185\u5bb9\u3067\u3059\u3002<\/p>\n\n\n\n
\n- node v18.2.0<\/li>\n\n\n\n
- react v18.2.0<\/li>\n\n\n\n
- typescript v4.7.4\uff08\u5f8c\u8ff0\u306emsw\u306e\u517c\u306d\u5408\u3044\u30674.2.x <= 4.7.x \u3067\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\uff09<\/li>\n<\/ul>\n\n\n\n
MSW\u306einstall<\/h2>\n\n\n\n
\u3067\u306finstall\u304b\u3089\u59cb\u3081\u3066\u3044\u304d\u307e\u3059\uff08\u8a18\u4e8b\u4f5c\u6210\u6642\u3001latest\u306fv0.45.0\u3067\u3057\u305f\u304c\u5ff5\u306e\u70ba\u6307\u5b9a\u3057\u307e\u3059\uff09<\/p>\n\n\n\n
npm install msw@0.45.0 --save-dev<\/code><\/pre><\/div>\n\n\n\ninstall\u5f8c\u306b\u306fmock\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3068handlers.ts\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
mkdir src\/mocks && touch touch src\/mocks\/handlers.ts<\/code><\/pre><\/div>\n\n\n\nhandlers.ts\u306e\u4e2d\u8eab\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/mocks\/handlers.ts\nimport { graphql, GraphQLVariables } from 'msw';\n\nexport const handlers = [\n graphql.query('GetUserInfo', (req, res, ctx) => {\n const authenticatedUser = sessionStorage.getItem('is-authenticated');\n if (!authenticatedUser) {\n return res(\n ctx.status(400),\n ctx.errors([\n {\n message: 'Not authenticated',\n errorType: 'AuthenticationError',\n },\n ])\n );\n }\n return res(\n ctx.status(200),\n ctx.data({\n user: {\n auth: authenticatedUser,\n firstname: 'USER_FIRSTNAME',\n lastname: 'USER_LASTNAME',\n },\n })\n );\n }),\n\n graphql.mutation('Login', (req, res, ctx) => {\n \/\/ eslint-disable-next-line @typescript-eslint\/no-unsafe-assignment\n const username: string = req.variables.username;\n sessionStorage.setItem('is-authenticated', username);\n return res(\n ctx.status(201),\n ctx.data({\n login: {\n username,\n },\n })\n );\n }),\n];\n<\/code><\/pre><\/div>\n\n\n\nAPI\u5b9a\u7fa9<\/h2>\n\n\n\n
\u6b21\u306fAPI\u5b9a\u7fa9\u3092\u9078\u629e\u3057\u307e\u3059\u3002API\u306f\u300cREST\u300d\u3068\u300cGraphQL\u300d\u304b\u3089\u9078\u629e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u4eca\u56de\u306f\u300cGraphQL\u300d\u3067\u9032\u3081\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
GraphQL\u3067\u306e\u30e2\u30c3\u30af\u306e\u5834\u5408\u306f\u3001GraphQLClient\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\nSince we will be working with a GraphQL API, we need to have a GraphQL client installed and configured in our application. We need that client primarily to dispatch queries and mutations. Please refer to the getting started steps of the respective client.<\/p>\nhttps:\/\/mswjs.io\/docs\/getting-started\/mocks\/graphql-api#pre-requisites<\/a><\/cite><\/blockquote>\n\n\n\n\u79c1\u306fApolloClient\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm install @apollo\/client graphql<\/code><\/pre><\/div>\n\n\n\nhttps:\/\/www.apollographql.com\/docs\/react\/get-started<\/a><\/p>\n\n\n\nService Worker -Browser-<\/h2>\n\n\n\n
\u6b21\u306f\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3055\u305b\u308b\u305f\u3081\u306eService Worker\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Service Worker\u306f\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u81ea\u52d5\u3067\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002
\u306a\u304a\u3001<PUBLIC_DIR>\u306e\u90e8\u5206\u306f\u5404JavaScript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u6bce\u306b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u6307\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u306e\u3067\u5f93\u3044\u307e\u3057\u3087\u3046\u3002
\uff08 React\u3084Vue.js\u306a\u3069\u3067\u306f public<\/span> , GatsbyJS\u3067\u306f static<\/span> \u306b\u8aad\u307f\u66ff\u3048\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n\n\n\nnpx msw init <PUBLIC_DIR> --save<\/code><\/pre><\/div>\n\n\n\nex.react)<\/p>\n\n\n\n
npx msw init public\/ --save<\/code><\/pre><\/div>\n\n\n\n\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u300cmockServiceWorker.js\u300d\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
Service Worker\u306e\u69cb\u6210\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/mocks\/browser.ts<\/code><\/pre><\/div>\n\n\n\nbrowser.ts\u306b\u306f\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/mocks\/browser.ts\nimport { setupWorker } from 'msw'\nimport { handlers } from '.\/handlers'\n\nexport const worker = setupWorker(...handlers)<\/code><\/pre><\/div>\n\n\n\n\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u306f\u3053\u308c\u3067\u7d42\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n
\u753b\u9762\u306e\u4f5c\u6210<\/h2>\n\n\n\n
\u7c21\u5358\u306a\u753b\u9762\u3092\u4f5c\u6210\u3057\u3066\u6b63\u5e38\u306b\u52d5\u4f5c\u3059\u308b\u304b\u8a66\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u307e\u305aApolloClient\u306e\u8a2d\u5b9a\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/ApolloClient.ts<\/code><\/pre><\/div>\n\n\n\n\/\/ src\/ApolloClient.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo\/client'\n\nconst cache = new InMemoryCache()\n\nconst link = new HttpLink({\n uri: 'http:\/\/localhost:3000\/graphql',\n fetch: (...args) => fetch(...args),\n})\n\n\/\/ Isolate Apollo client so it could be reused\n\/\/ in both application runtime and tests.\nexport const client = new ApolloClient({\n cache,\n link,\n})<\/code><\/pre><\/div>\n\n\n\n\u6b21\u306b\u5165\u529b\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/LoginForm.tsx<\/code><\/pre><\/div>\n\n\n\n\/\/ src\/LoginForm.tsx\nimport React, { useCallback, useState } from 'react';\nimport { gql, useMutation, useQuery } from '@apollo\/client';\n\nconst LOG_IN = gql`\n mutation Login($username: String!) {\n login(username: $username) {\n username\n }\n }\n`;\n\ninterface LoginSessionDetails {\n id: number;\n username: string;\n}\n\n\/\/ login form\nexport const LoginForm = () => {\n const [username, setUserName] = useState('');\n \/\/ mutation\n const [Login, { data, loading, error }] = useMutation<{ Login: LoginSessionDetails }, { username: string }>(LOG_IN, {\n variables: { username },\n });\n\n const handleUsernameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setUserName(event.target.value);\n }, []);\n\n const handleFormSubmit = useCallback(\n (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n Login({\n variables: {\n username,\n },\n }).catch((err) => console.log(err));\n },\n [username, Login]\n );\n\n if (loading) {\n return <p>Loading...<\/p>;\n }\n\n if (error) {\n return <p>Error while fetching the user data ({error.message})<\/p>;\n }\n\n if (data) {\n return <UserInfo \/>;\n }\n\n return (\n <div>\n <h1>Login<\/h1>\n <form onSubmit={handleFormSubmit}>\n <div>\n <label htmlFor='username'>Username:<\/label>\n <input id='username' name='username' value={username} onChange={handleUsernameChange} \/>\n <button type='submit'>Submit<\/button>\n <\/div>\n <\/form>\n <\/div>\n );\n};\n\ninterface UserInfo {\n firstname: string;\n lastname: string;\n}\n\ninterface User {\n user: UserInfo;\n}\n\nconst GET_USER_INFO = gql`\n query GetUserInfo {\n user {\n firstname\n lastname\n }\n }\n`;\n\nconst UserInfo = () => {\n \/\/ queries\n const { loading, data, error } = useQuery<User>(GET_USER_INFO);\n\n if (loading) return <p>Loading ...<\/p>;\n\n return (\n <>\n {data && (\n <>\n <h3>FirstName:<\/h3>\n <div>{data.user.firstname}<\/div>\n <h3>LastName:<\/h3>\n <div>{data.user.lastname}<\/div>\n <\/>\n )}\n {error && (\n <>\n <div>{error.message}<\/div>\n <\/>\n )}\n <\/>\n );\n};\n<\/code><\/pre><\/div>\n\n\n\n\u6b21\u306bindex.tsx\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/index.tsx\nimport React from 'react';\nimport { ApolloProvider } from '@apollo\/client';\nimport { client } from '.\/ApolloClient';\nimport { LoginForm } from '.\/LoginForm';\nimport { createRoot } from 'react-dom\/client';\nimport { worker } from '.\/mocks\/browser';\n\nconst container = document.getElementById('root');\nconst root = createRoot(container!); \/\/ createRoot(container!) if you use TypeScript\n\n\/\/ Start the mocking conditionally.\nif (process.env.NODE_ENV === 'development') {\n worker.start().catch((err) => console.log(err));\n}\n\nroot.render(\n <React.StrictMode>\n <ApolloProvider client={client}>\n <LoginForm \/>\n <\/ApolloProvider>\n <\/React.StrictMode>\n);\n<\/code><\/pre><\/div>\n\n\n\n\u3053\u308c\u3067\u8a66\u3057\u3066\u307f\u308b\u74b0\u5883\u306f\u6574\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u78ba\u8a8d\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u753b\u9762\u78ba\u8a8d<\/h2>\n\n\n\n
- \n
- MacBook Pro (2019late)\n
- \n
- Monterey v12.5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
\u79c1\u306fReact\uff08TypeScript\uff09\u3067\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u306e\u3067\u4ee5\u4e0b\u304c\u4e3b\u8981\u306a\u5185\u5bb9\u3067\u3059\u3002<\/p>\n\n\n\n
- \n
- node v18.2.0<\/li>\n\n\n\n
- react v18.2.0<\/li>\n\n\n\n
- typescript v4.7.4\uff08\u5f8c\u8ff0\u306emsw\u306e\u517c\u306d\u5408\u3044\u30674.2.x <= 4.7.x \u3067\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\uff09<\/li>\n<\/ul>\n\n\n\n
MSW\u306einstall<\/h2>\n\n\n\n
\u3067\u306finstall\u304b\u3089\u59cb\u3081\u3066\u3044\u304d\u307e\u3059\uff08\u8a18\u4e8b\u4f5c\u6210\u6642\u3001latest\u306fv0.45.0\u3067\u3057\u305f\u304c\u5ff5\u306e\u70ba\u6307\u5b9a\u3057\u307e\u3059\uff09<\/p>\n\n\n\n
npm install msw@0.45.0 --save-dev<\/code><\/pre><\/div>\n\n\n\ninstall\u5f8c\u306b\u306fmock\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3068handlers.ts\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
mkdir src\/mocks && touch touch src\/mocks\/handlers.ts<\/code><\/pre><\/div>\n\n\n\nhandlers.ts\u306e\u4e2d\u8eab\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/mocks\/handlers.ts\nimport { graphql, GraphQLVariables } from 'msw';\n\nexport const handlers = [\n graphql.query('GetUserInfo', (req, res, ctx) => {\n const authenticatedUser = sessionStorage.getItem('is-authenticated');\n if (!authenticatedUser) {\n return res(\n ctx.status(400),\n ctx.errors([\n {\n message: 'Not authenticated',\n errorType: 'AuthenticationError',\n },\n ])\n );\n }\n return res(\n ctx.status(200),\n ctx.data({\n user: {\n auth: authenticatedUser,\n firstname: 'USER_FIRSTNAME',\n lastname: 'USER_LASTNAME',\n },\n })\n );\n }),\n\n graphql.mutation('Login', (req, res, ctx) => {\n \/\/ eslint-disable-next-line @typescript-eslint\/no-unsafe-assignment\n const username: string = req.variables.username;\n sessionStorage.setItem('is-authenticated', username);\n return res(\n ctx.status(201),\n ctx.data({\n login: {\n username,\n },\n })\n );\n }),\n];\n<\/code><\/pre><\/div>\n\n\n\nAPI\u5b9a\u7fa9<\/h2>\n\n\n\n
\u6b21\u306fAPI\u5b9a\u7fa9\u3092\u9078\u629e\u3057\u307e\u3059\u3002API\u306f\u300cREST\u300d\u3068\u300cGraphQL\u300d\u304b\u3089\u9078\u629e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u4eca\u56de\u306f\u300cGraphQL\u300d\u3067\u9032\u3081\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
GraphQL\u3067\u306e\u30e2\u30c3\u30af\u306e\u5834\u5408\u306f\u3001GraphQLClient\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\n
Since we will be working with a GraphQL API, we need to have a GraphQL client installed and configured in our application. We need that client primarily to dispatch queries and mutations. Please refer to the getting started steps of the respective client.<\/p>\nhttps:\/\/mswjs.io\/docs\/getting-started\/mocks\/graphql-api#pre-requisites<\/a><\/cite><\/blockquote>\n\n\n\n
\u79c1\u306fApolloClient\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm install @apollo\/client graphql<\/code><\/pre><\/div>\n\n\n\nhttps:\/\/www.apollographql.com\/docs\/react\/get-started<\/a><\/p>\n\n\n\n
Service Worker -Browser-<\/h2>\n\n\n\n
\u6b21\u306f\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3055\u305b\u308b\u305f\u3081\u306eService Worker\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Service Worker\u306f\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u81ea\u52d5\u3067\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002
\u306a\u304a\u3001<PUBLIC_DIR>\u306e\u90e8\u5206\u306f\u5404JavaScript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u6bce\u306b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u6307\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u306e\u3067\u5f93\u3044\u307e\u3057\u3087\u3046\u3002
\uff08 React\u3084Vue.js\u306a\u3069\u3067\u306f public<\/span> , GatsbyJS\u3067\u306f static<\/span> \u306b\u8aad\u307f\u66ff\u3048\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n\n\n\nnpx msw init <PUBLIC_DIR> --save<\/code><\/pre><\/div>\n\n\n\nex.react)<\/p>\n\n\n\n
npx msw init public\/ --save<\/code><\/pre><\/div>\n\n\n\n\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u300cmockServiceWorker.js\u300d\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
Service Worker\u306e\u69cb\u6210\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/mocks\/browser.ts<\/code><\/pre><\/div>\n\n\n\nbrowser.ts\u306b\u306f\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/mocks\/browser.ts\nimport { setupWorker } from 'msw'\nimport { handlers } from '.\/handlers'\n\nexport const worker = setupWorker(...handlers)<\/code><\/pre><\/div>\n\n\n\n\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u306f\u3053\u308c\u3067\u7d42\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n
\u753b\u9762\u306e\u4f5c\u6210<\/h2>\n\n\n\n
\u7c21\u5358\u306a\u753b\u9762\u3092\u4f5c\u6210\u3057\u3066\u6b63\u5e38\u306b\u52d5\u4f5c\u3059\u308b\u304b\u8a66\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u307e\u305aApolloClient\u306e\u8a2d\u5b9a\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/ApolloClient.ts<\/code><\/pre><\/div>\n\n\n\n\/\/ src\/ApolloClient.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo\/client'\n\nconst cache = new InMemoryCache()\n\nconst link = new HttpLink({\n uri: 'http:\/\/localhost:3000\/graphql',\n fetch: (...args) => fetch(...args),\n})\n\n\/\/ Isolate Apollo client so it could be reused\n\/\/ in both application runtime and tests.\nexport const client = new ApolloClient({\n cache,\n link,\n})<\/code><\/pre><\/div>\n\n\n\n\u6b21\u306b\u5165\u529b\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
touch src\/LoginForm.tsx<\/code><\/pre><\/div>\n\n\n\n\/\/ src\/LoginForm.tsx\nimport React, { useCallback, useState } from 'react';\nimport { gql, useMutation, useQuery } from '@apollo\/client';\n\nconst LOG_IN = gql`\n mutation Login($username: String!) {\n login(username: $username) {\n username\n }\n }\n`;\n\ninterface LoginSessionDetails {\n id: number;\n username: string;\n}\n\n\/\/ login form\nexport const LoginForm = () => {\n const [username, setUserName] = useState('');\n \/\/ mutation\n const [Login, { data, loading, error }] = useMutation<{ Login: LoginSessionDetails }, { username: string }>(LOG_IN, {\n variables: { username },\n });\n\n const handleUsernameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setUserName(event.target.value);\n }, []);\n\n const handleFormSubmit = useCallback(\n (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n Login({\n variables: {\n username,\n },\n }).catch((err) => console.log(err));\n },\n [username, Login]\n );\n\n if (loading) {\n return <p>Loading...<\/p>;\n }\n\n if (error) {\n return <p>Error while fetching the user data ({error.message})<\/p>;\n }\n\n if (data) {\n return <UserInfo \/>;\n }\n\n return (\n <div>\n <h1>Login<\/h1>\n <form onSubmit={handleFormSubmit}>\n <div>\n <label htmlFor='username'>Username:<\/label>\n <input id='username' name='username' value={username} onChange={handleUsernameChange} \/>\n <button type='submit'>Submit<\/button>\n <\/div>\n <\/form>\n <\/div>\n );\n};\n\ninterface UserInfo {\n firstname: string;\n lastname: string;\n}\n\ninterface User {\n user: UserInfo;\n}\n\nconst GET_USER_INFO = gql`\n query GetUserInfo {\n user {\n firstname\n lastname\n }\n }\n`;\n\nconst UserInfo = () => {\n \/\/ queries\n const { loading, data, error } = useQuery<User>(GET_USER_INFO);\n\n if (loading) return <p>Loading ...<\/p>;\n\n return (\n <>\n {data && (\n <>\n <h3>FirstName:<\/h3>\n <div>{data.user.firstname}<\/div>\n <h3>LastName:<\/h3>\n <div>{data.user.lastname}<\/div>\n <\/>\n )}\n {error && (\n <>\n <div>{error.message}<\/div>\n <\/>\n )}\n <\/>\n );\n};\n<\/code><\/pre><\/div>\n\n\n\n\u6b21\u306bindex.tsx\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ src\/index.tsx\nimport React from 'react';\nimport { ApolloProvider } from '@apollo\/client';\nimport { client } from '.\/ApolloClient';\nimport { LoginForm } from '.\/LoginForm';\nimport { createRoot } from 'react-dom\/client';\nimport { worker } from '.\/mocks\/browser';\n\nconst container = document.getElementById('root');\nconst root = createRoot(container!); \/\/ createRoot(container!) if you use TypeScript\n\n\/\/ Start the mocking conditionally.\nif (process.env.NODE_ENV === 'development') {\n worker.start().catch((err) => console.log(err));\n}\n\nroot.render(\n <React.StrictMode>\n <ApolloProvider client={client}>\n <LoginForm \/>\n <\/ApolloProvider>\n <\/React.StrictMode>\n);\n<\/code><\/pre><\/div>\n\n\n\n\u3053\u308c\u3067\u8a66\u3057\u3066\u307f\u308b\u74b0\u5883\u306f\u6574\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u78ba\u8a8d\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u753b\u9762\u78ba\u8a8d<\/h2>\n\n\n\n
- Monterey v12.5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2022\/08\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2022-08-28-0.27.03.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2022\/08\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2022-08-28-0.43.42-1024x497.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2022\/08\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2022-08-28-0.47.33-1024x294.png\")
<\/figure>\n\n\n\n