{"id":16341825,"url":"https://github.com/adimit/react-wasm-github-api-demo","last_synced_at":"2025-03-23T00:32:32.740Z","repository":{"id":66452603,"uuid":"334538383","full_name":"adimit/react-wasm-github-api-demo","owner":"adimit","description":"A demo application to serve as a template for your Rust \u0026 React needs. With a sample GraphQL backend.","archived":false,"fork":false,"pushed_at":"2021-02-12T12:44:16.000Z","size":963,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-15T04:43:56.063Z","etag":null,"topics":["graphql","react","rust","typescript","wasm"],"latest_commit_sha":null,"homepage":"https://aleks.bg/rust-cra","language":"Rust","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/adimit.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":"2021-01-31T00:06:36.000Z","updated_at":"2022-03-19T19:11:52.000Z","dependencies_parsed_at":"2023-02-23T07:16:12.149Z","dependency_job_id":null,"html_url":"https://github.com/adimit/react-wasm-github-api-demo","commit_stats":{"total_commits":46,"total_committers":1,"mean_commits":46.0,"dds":0.0,"last_synced_commit":"26bc49b96013bc3b645d4f236f6d2706363b89f7"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adimit%2Freact-wasm-github-api-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adimit%2Freact-wasm-github-api-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adimit%2Freact-wasm-github-api-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adimit%2Freact-wasm-github-api-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adimit","download_url":"https://codeload.github.com/adimit/react-wasm-github-api-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245040235,"owners_count":20551297,"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":["graphql","react","rust","typescript","wasm"],"created_at":"2024-10-11T00:00:28.670Z","updated_at":"2025-03-23T00:32:32.724Z","avatar_url":"https://github.com/adimit.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rust 🦀 + Create React App ⚛️ + Typescript\n\nThis is a demo application that fetches generic information about a repository using the Github Graphql API. This repository is meant to serve as a springboard for creating new applications that use React and Rust/WASM.\n\nA hosted version is [available here](https://aleks.bg/rust-cra). You will need a Github API token with read permissions. Get one [here](https://github.com/settings/tokens).\n\nThe application requests information from the Github Graphql API using the Browser's fetch API through [web-sys](https://crates.io/crates/web-sys) with Rust's [graphql-client](https://crates.io/crates/graphql-client). The results are shown in a simple [React app](https://reactjs.org/docs/create-a-new-react-app.html).\n\n## How to get Started\n\nYou will need [`yarn`](https://yarnpkg.com/), [Rust](https://www.rust-lang.org/tools/install) and [`wasm-pack`](https://rustwasm.github.io/wasm-pack/). There are detailed instructions on how to set up your computer for Rust \u0026 WASM development in the [Rust \u0026 Webassembly book](https://rustwasm.github.io/docs/book/).\n\nCheck out or fork this repository\n\n```\ngit clone git@github.com:adimit/react-wasm-github-api-demo.git\ncd react-wasm-github-api-demo\n```\n\nthen run install the JS dependencies and run the test server:\n\n```\nyarn install\nyarn start\n```\n\nThe application should now be reachable from `http://localhost:3000`.\n\nWhenever you edit a TypeScript *or* Rust file, or edit your graphql schema, queries or `Cargo.toml`, the server should automatically pick up the changes and reload.\n\nAfter changes to the Rust side of things, you may need to reload the page in the browser manually.\n\n## Downloading the Graphql Schema\n\nTo re-fetch the Github Graphql schema, use the `yarn` target `download-schema`. Don't forget to set the env variable `GITHUB_API_TOKEN` first.\n\n```\nenv GITHUB_API_TOKEN=\"xxx\" yarn download-schema\n```\n\n# About the Code\n\n## Graphql Web Client\n\nThe [Graphql Web Client](https://github.com/graphql-rust/graphql-client/blob/master/graphql_client/src/web.rs) is currently [incompatible](https://github.com/graphql-rust/graphql-client/issues/331) with the stabilized futures API. As a workaround, this repository contains an almost verbatim copy of the graphql web client.\n\nYou can re-use the client in `web.rs` for your own application, or wait until the necessary [PR is merged](https://github.com/graphql-rust/graphql-client/pull/327) upstream.\n\n## Plumbing\n\nThe symbolic link `src/pkg` links the Rust WASM JS output into the JS application. To import any function exported in `lib.rs` with the appropriate `wasm_bindgen` signature, just use\n\n```\nimport { yourFunction } from `./pkg`;\n```\n\nTake care to adjust the relative path to `pkg`. This setup is a bit awkward, but allows for seamless recompilation of the application whenever Rust components change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadimit%2Freact-wasm-github-api-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadimit%2Freact-wasm-github-api-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadimit%2Freact-wasm-github-api-demo/lists"}