{"id":19894541,"url":"https://github.com/stepzen-dev/stepzen-react-tutorial","last_synced_at":"2026-05-14T03:32:52.207Z","repository":{"id":109989364,"uuid":"340283126","full_name":"stepzen-dev/stepzen-react-tutorial","owner":"stepzen-dev","description":"How to use Apollo Client to Connect a React Frontend to a GraphQL API","archived":false,"fork":false,"pushed_at":"2021-04-18T18:44:14.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-25T11:50:41.788Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stepzen-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-02-19T06:51:07.000Z","updated_at":"2021-04-18T18:44:16.000Z","dependencies_parsed_at":"2023-03-13T13:59:33.348Z","dependency_job_id":null,"html_url":"https://github.com/stepzen-dev/stepzen-react-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stepzen-dev/stepzen-react-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-react-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-react-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-react-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-react-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stepzen-dev","download_url":"https://codeload.github.com/stepzen-dev/stepzen-react-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-react-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33009479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-12T18:33:49.372Z","updated_at":"2026-05-14T03:32:52.194Z","avatar_url":"https://github.com/stepzen-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StepZen React Tutorial\n\n## Overview\n\nThe client will query a GraphQL API created from the JSONPlaceholder API. We are able to use the [`@rest` directive](https://stepzen.com/blog/how-to-connect-any-rest-backend) to easily translate the API into a GraphQL schema.\n\n![05-unordered-list-of-users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6667k39b37vmhz2xokwc.png)\n\n## API Setup\n\n### Clone repository and install dependencies\n\n```\ngit clone https://github.com/stepzen-samples/stepzen-react-tutorial\ncd stepzen-react-tutorial\nnpm i\n```\n\n### Deploy API\n\nThe `stepzen start` command uploads and deploys your API automatically.\n\n```bash\nstepzen start\n```\n\nA browser window with a GraphiQL query editor can be used to query your new endpoint on `localhost:5000`. Enter the following query to test your endpoint:\n\n```graphql\nquery getUsers {\n  getUsers {\n    id\n    name\n  }\n}\n```\n\n![03-graphql-api-explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7bbyjnbkgb05u1i6w75.png)\n\n### `index.graphql` defines all files making up the GraphQL schema\n\nEvery StepZen project requires an `index.graphql` that ties together all of our schemas. For this example we just have the `users.graphql` file included in our `@sdl` directive. The `@sdl` directive is a StepZen directive that specifies the list of files to assemble.\n\n```graphql\n# stepzen/index.graphql\n\nschema\n  @sdl(\n    files: [ \"schema/users.graphql\" ]\n  ) {\n  query: Query\n}\n```\n\n### `users.graphql` defines `User` type and `getUsers` query\n\nThe `User` type includes an `id` for each `User` and information about the `User` such as their `name` and `email`. For our `Query` we just have a single query called `getUsers` that returns an array of `User` objects. The `@rest` directive accepts the `endpoint` from JSONPlaceholder.\n\n```graphql\n# stepzen/schema/users.graphql\n\ntype User {\n  id: ID!\n  name: String!\n  username: String!\n  email: String!\n  phone: String!\n  website: String!\n}\n\ntype Query {\n  getUsers: [User]\n    @rest(\n      endpoint:\"https://jsonplaceholder.typicode.com/users\"\n    )\n}\n```\n\n## Frontend Setup\n\n### Create `.env` file\n\n```\ntouch .env\n```\n\n`stepzen start` also deployed our API to `https://username.stepzen.net/stepzen-react/users/__graphql`. Fill in your username and set the URL to the `REACT_APP_STEPZEN_ENDPOINT` environment variable. Include your StepZen API key for the `REACT_APP_STEPZEN_API_KEY` environment variable.\n\n```\nREACT_APP_STEPZEN_API_KEY=YOUR_KEY_HERE\nREACT_APP_STEPZEN_ENDPOINT=YOUR_ENDPOINT_HERE\n```\n\nStart the development server on `localhost:3000`.\n\n```\nnpm start\n```\n\n![05-unordered-list-of-users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6667k39b37vmhz2xokwc.png)\n\n### Troubleshoot\n\nEnvironment variables are tricky, if you are having trouble getting your frontend to connect to your endpoint here are a few things you can double check:\n* Make sure you are following the correct [naming convention](https://create-react-app.dev/docs/adding-custom-environment-variables/) for the environment variables\n* Make sure you are setting the deployed endpoint and not the endpoint running on localhost\n* Make sure you are using your API key and not your Admin key\n* Make sure there aren't any extra [whitespace characters](https://en.wikipedia.org/wiki/Whitespace_character) between the variable names and the actual keys\n\nWhen in doubt you can `console.log` lines 4-5 in `client.js` to see if your keys are being set correctly with the Apollo client.\n\n### index.html\n\n```html\n\u003c!-- public/index.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1\"\n    /\u003e\n    \u003cmeta\n      name=\"theme-color\"\n      content=\"#000000\"\n    /\u003e\n    \u003cmeta\n      name=\"description\"\n      content=\"How to use Apollo Client to Connect a React Frontend to a GraphQL API\"\n    /\u003e\n\n    \u003ctitle\u003eReact + StepZen App\u003c/title\u003e\n  \u003c/head\u003e\n  \n  \u003cbody\u003e\n    \u003cnoscript\u003e\n      You need to enable JavaScript to run this app.\n    \u003c/noscript\u003e\n\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003c!--\n      This HTML file is a template.\n    --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### index.js\n\n```jsx\n// src/index.js\n\nimport React from \"react\"\nimport { render } from \"react-dom\"\nimport { ApolloProvider } from \"@apollo/react-hooks\"\nimport { client } from \"./utils/client\"\nimport HomePage from \"./pages/HomePage\"\n\nrender(\n  \u003cReact.StrictMode\u003e\n    \u003cApolloProvider client={client}\u003e\n      \u003cHomePage /\u003e\n    \u003c/ApolloProvider\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n)\n```\n\n### client.js\n\n```jsx\n// src/utils/client.js\n\nimport ApolloClient from \"apollo-boost\"\n\nconst {\n  REACT_APP_STEPZEN_API_KEY,\n  REACT_APP_STEPZEN_ENDPOINT\n} = process.env\n\nexport const client = new ApolloClient({\n  headers: {\n    Authorization: `Apikey ${REACT_APP_STEPZEN_API_KEY}`,\n  },\n  uri: REACT_APP_STEPZEN_ENDPOINT,\n})\n```\n\n\n### HomePage.js\n\n```jsx\n// src/pages/HomePage.js\n\nimport Users from \"../components/Users\"\n\nexport default function HomePage() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eStepZen React Tutorial\u003c/h1\u003e\n      \u003cUsers /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Users.js\n\n```jsx\n// src/components/Users.js\n\nimport { useQuery } from \"@apollo/react-hooks\"\nimport { GET_USERS_QUERY } from \"../queries/getUsers.js\"\n\nexport default function Users() {\n  const {\n    data,\n    loading,\n    error\n  } = useQuery(GET_USERS_QUERY)\n\n  const users = data?.getUsers\n  \n  if (loading) return \u003cp\u003eAlmost there...\u003c/p\u003e\n  if (error) return \u003cp\u003e{error.message}\u003c/p\u003e\n  \n  return (\n    \u003c\u003e\n      \u003ch2\u003eUsers\u003c/h2\u003e\n      \n      {users.map(user =\u003e (\n        \u003cul key={user.id}\u003e\n          \u003cli\u003e\n            {user.name}\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      ))}\n    \u003c/\u003e\n  )\n}\n```\n\n### getUsers.js\n\n```jsx\n// src/queries/getUsers.js\n\nimport { gql } from \"graphql-tag\"\n\nexport const GET_USERS_QUERY = gql`\n  query getUsers {\n    getUsers {\n      id\n      name\n    }\n  }\n`\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-react-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstepzen-dev%2Fstepzen-react-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-react-tutorial/lists"}