{"id":16182408,"url":"https://github.com/drawveloper/graphql-hmr","last_synced_at":"2025-04-07T12:30:07.932Z","repository":{"id":148526270,"uuid":"84113490","full_name":"drawveloper/graphql-hmr","owner":"drawveloper","description":"Reproduction of a quirk in react-apollo graphql behaviour with HMR","archived":false,"fork":false,"pushed_at":"2017-03-06T19:57:24.000Z","size":65,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-13T15:18:10.534Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drawveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-06T19:41:57.000Z","updated_at":"2023-03-11T12:20:28.000Z","dependencies_parsed_at":"2023-05-20T10:00:31.759Z","dependency_job_id":null,"html_url":"https://github.com/drawveloper/graphql-hmr","commit_stats":null,"previous_names":["drawveloper/graphql-hmr"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawveloper%2Fgraphql-hmr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawveloper%2Fgraphql-hmr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawveloper%2Fgraphql-hmr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawveloper%2Fgraphql-hmr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drawveloper","download_url":"https://codeload.github.com/drawveloper/graphql-hmr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247652431,"owners_count":20973622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T06:31:23.156Z","updated_at":"2025-04-07T12:30:07.889Z","avatar_url":"https://github.com/drawveloper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL React Hot Module Replacement quirk reproduction\n\nThis is a utility repo to show off the quirk fixed in https://github.com/apollographql/react-apollo/pull/505\n\n### Setup\n\nSimply install deps and run.\n\n```\n$ yarn\n$ yarn start\n```\n\nNavigate to [http://localhost:3000](http://localhost:3000).\n\nNow open `src/App.js`, edit the rendered string to anything else and save.\n\nYou'll see that the console emits something like this:\n\n```\ngraphql.js:84graphql\ngraphql.js:106wrapWithApolloComponent\ngraphql.js:107wrapWithApolloComponent, WrappedComponent === window.App true\ngraphql.js:113 GraphQL constructor Object {} Object {store: Object, client: ApolloClient}\ngraphql.js:353 GraphQL render\ngraphql.js:353 GraphQL render\ngraphql.js:366 GraphQL render, renderedElement.type === WrappedComponent true\ngraphql.js:367 GraphQL render, renderedElement.type === window.App true\ngraphql.js:368 GraphQL render, renderedElement.type === window.firstApp true\nclient.js:67 [HMR] connected\nclient.js:199 [HMR] bundle rebuilding\nclient.js:207 [HMR] bundle rebuilt in 150ms\nprocess-update.js:27 [HMR] Checking for updates on the server...\ngraphql.js:84 graphql\ngraphql.js:106 wrapWithApolloComponent\ngraphql.js:107 wrapWithApolloComponent, WrappedComponent === window.App false\nprocess-update.js:100 [HMR] Updated modules:\nprocess-update.js:102 [HMR]  - ./src/App.js\nprocess-update.js:107 [HMR] App is up to date.\ngraphql.js:353 GraphQL render\ngraphql.js:366 GraphQL render, renderedElement.type === WrappedComponent false\ngraphql.js:367 GraphQL render, renderedElement.type === window.App false\ngraphql.js:368 GraphQL render, renderedElement.type === window.firstApp true\n```\n\nThis demonstrates that even though `wrapWithApolloComponent` is called, a new instance of `GraphQL` is **not** constructed during React's tree reconciliation, and therefore the old `renderedElement` is (incorrectly) reused.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawveloper%2Fgraphql-hmr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawveloper%2Fgraphql-hmr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawveloper%2Fgraphql-hmr/lists"}