This 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.
A hosted version is available here. You will need a Github API token with read permissions. Get one here.
The application requests information from the Github Graphql API using the Browser's fetch API through web-sys with Rust's graphql-client. The results are shown in a simple React app.
You will need yarn, Rust and wasm-pack. There are detailed instructions on how to set up your computer for Rust & WASM development in the Rust & Webassembly book.
Check out or fork this repository
git clone git@github.com:adimit/react-wasm-github-api-demo.git
cd react-wasm-github-api-demo
then run install the JS dependencies and run the test server:
yarn install
yarn start
The application should now be reachable from http://localhost:3000.
Whenever 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.
After changes to the Rust side of things, you may need to reload the page in the browser manually.
To re-fetch the Github Graphql schema, use the yarn target download-schema. Don't forget to set the env variable GITHUB_API_TOKEN first.
env GITHUB_API_TOKEN="xxx" yarn download-schema
The Graphql Web Client is currently incompatible with the stabilized futures API. As a workaround, this repository contains an almost verbatim copy of the graphql web client.
You can re-use the client in web.rs for your own application, or wait until the necessary PR is merged upstream.
The 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
import { yourFunction } from `./pkg`;
Take 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.