{"id":13515540,"url":"https://github.com/MikeBild/racyjs","last_synced_at":"2025-03-31T04:37:12.254Z","repository":{"id":136939814,"uuid":"148807439","full_name":"MikeBild/racyjs","owner":"MikeBild","description":"A blazing fast zero-configuration async server-side React with GraphQL toolbelt","archived":false,"fork":false,"pushed_at":"2018-11-13T08:20:24.000Z","size":784,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T21:32:41.299Z","etag":null,"topics":["api","apollo","async","graphql","parceljs","react","reactjs","server-side-rendering","ssr"],"latest_commit_sha":null,"homepage":"","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/MikeBild.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null}},"created_at":"2018-09-14T15:24:24.000Z","updated_at":"2021-02-08T22:54:48.000Z","dependencies_parsed_at":"2024-02-03T23:58:02.585Z","dependency_job_id":null,"html_url":"https://github.com/MikeBild/racyjs","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fracyjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fracyjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fracyjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBild%2Fracyjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeBild","download_url":"https://codeload.github.com/MikeBild/racyjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418675,"owners_count":20773935,"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":["api","apollo","async","graphql","parceljs","react","reactjs","server-side-rendering","ssr"],"created_at":"2024-08-01T05:01:12.659Z","updated_at":"2025-03-31T04:37:09.877Z","avatar_url":"https://github.com/MikeBild.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Racy\n\n\u003e A blazing fast zero-configuration async server-side React with GraphQL\n\u003e toolbelt.\n\n## Stack\n\n- [Babel 7 + Polyfill](https://github.com/babel/babel)\n- [Parcel Bundler](https://github.com/parcel-bundler/parcel/blob/master/README.md)\n- [React](https://github.com/facebook/react/blob/master/README.md)\n- [Styled-Components](https://github.com/styled-components/styled-components/blob/master/README.md)\n- [Helmet-Async](https://github.com/staylor/react-helmet-async/blob/master/README.md)\n- [React-Router v4](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/README.md) +\n  [React-Router-DOM](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/README.md) +\n  [React-Router-Config](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-config/README.md)\n- [Express](https://github.com/expressjs/express/blob/master/Readme.md)\n- [GraphQL](https://github.com/facebook/graphql/blob/master/README.md)\n  [Apollo React](https://github.com/apollographql/react-apollo/blob/master/README.md)\n  \u0026\n  [Apollo Server](https://github.com/apollographql/apollo-server/blob/master/README.md)\n\n## Setup\n\n- `npm init -f`\n- `yarn add racy`\n\n_`package.json`_\n\n```json\n\"scripts\": {\n  \"dev\": \"racy dev\",\n  \"build\": \"racy build\",\n  \"serve\": \"racy serve\",\n  \"export\": \"racy export\",\n  \"start\": \"NODE_ENV=production racy build \u0026\u0026 racy serve\",\n  \"static\": \"NODE_ENV=production npm run export \u0026\u0026 racy static\"\n}\n```\n\n## How to\n\n- [How to create a simple React-App?](#how-to-create-a-simple-react-app)\n- [How to customize the default configuration?](#how-to-customize-the-default-configuration)\n- [How to map a component to a route?](#How-to-map-a-component-to-a-route)\n- [How to use dynamic imports and code splitting?](#how-to-use-dynamic-imports-and-code-splitting)\n- [How to use GraphQL on the client?](#how-to-use-graphql-on-the-client)\n- [How to use customize Apollo links?](#how-to-use-customize-apollo-links)\n- [How to extend Express with additional middleware?](#how-to-extend-express-with-additional-middleware)\n- [How to create a GraphQL server?](#how-to-create-a-graphql-server)\n- [How to add GraphQL subscriptions on the client?](#how-to-add-graphql-subscriptions-on-the-client)\n\n## CLI\n\n- `racy dev` - Develop an App\n- `racy build` - Build an App for dynamically serving\n- `racy serve` - Dynamically serve an App\n- `racy export` - Export an App for statically serving\n- `racy static` - Statically serve an App\n- `racy graphql schema` - Fetch and save GraphQL schema to a file\n- `racy graphql fragments` - Fetch and save GraphQL fragment types to a file\n\n## How to create a simple React-App?\n\nJust enter `yarn add react` and create a `App.js` in your project root folder.\n\n_`App.js`_\n\n```jsx\nimport React, { Fragment as F } from 'react';\nimport Helmet from 'react-helmet';\nimport styled from 'styled-components';\n\nconst Headline = styled.h1`\n  color: blue;\n`;\n\nexport default async ({ name, version, port }) =\u003e (\n  \u003cF\u003e\n    \u003cHelmet\u003e\n      \u003cmeta charSet=\"utf-8\" /\u003e\n      \u003ctitle\u003eReact-App\u003c/title\u003e\n    \u003c/Helmet\u003e\n    \u003cHeadline\u003e\n      Racy Basic App Example {name} {version}\n    \u003c/Headline\u003e\n  \u003c/F\u003e\n);\n```\n\n- [React Basic Example](examples/react-basic/README.md)\n\n## How to customize the default configuration?\n\nJust create a `config.js` in your project root folder.\n\n_`config.js`_\n\n```javascript\nexport default {\n  // Listen on port?\n  port: process.env.PORT || 8080,\n  // GraphQL prefetch on server?\n  shouldPrefetch: false,\n  // SSR mode only?\n  ssrMode: false,\n};\n```\n\n- [React Advanced Example](examples/react-advanced/README.md)\n\n## How to map a component to a route?\n\n- [React-Router-Config](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-config/README.md)\n\n_`App.js`_\n\n```jsx\nimport React from 'react';\nimport Home from './components/Home';\nimport About from './components/About';\nimport NotFound from './components/NotFound';\n\nexport default async () =\u003e [\n  { path: '/', exact: true, component: Home },\n  { path: '/about', exact: true, component: About },\n  { component: NotFound },\n];\n```\n\n- [React Advanced Example](examples/react-advanced/README.md)\n\n## How to use dynamic imports and code splitting?\n\n_`App.js`_\n\n```jsx\nimport React from 'react';\n\nexport default async () =\u003e {\n  const { default: Home } = await import('./components/Home');\n  const { default: About } = await import('./components/About');\n\n  return [\n    { path: '/', exact: true, component: Home },\n    { path: '/about', exact: true, component: About },\n  ];\n};\n```\n\n- [React Advanced Example](examples/react-advanced/README.md)\n\n## How to use GraphQL on the client?\n\n_`App.js`_\n\n```jsx\nimport React, { Fragment as F } from 'react';\nimport { Query } from 'react-apollo';\n\nimport GITHUB_QUERY from './Github.gql';\n\nexport default async ({ name, version }) =\u003e {\n  return (\n    \u003cF\u003e\n      \u003ch1\u003e\n        App: {name} {version}\n      \u003c/h1\u003e\n      \u003cQuery query={GITHUB_QUERY}\u003e\n        {({ data, error, loading }) =\u003e {\n          if (loading) return \u003cdiv\u003eloading ...\u003c/div\u003e;\n          if (error) return \u003cdiv\u003e{error.message}\u003c/div\u003e;\n          return \u003cpre\u003e{JSON.stringify(data, null, 4)}\u003c/pre\u003e;\n        }}\n      \u003c/Query\u003e\n    \u003c/F\u003e\n  );\n};\n```\n\n_`config.js`_\n\n```javascript\nexport default {\n  // Listen on port\n  port: process.env.PORT || 8080,\n  // GraphQL URL for GraphQL queries\n  graphqlUrl: process.env.GRAPHQLURL || 'https://www.graphqlhub.com/graphql',\n  // Import fragment types file to resolve union and interface types\n  createFragmentTypes: async () =\u003e await import('./fragmentTypes.json'),\n  // Enable prefetching on server-side\n  shouldPrefetch: true,\n};\n```\n\n- [React GraphQL Example](examples/react-graphql/README.md)\n\n## How to use customize Apollo links?\n\n_`config.js`_\n\n```jsx\nimport { withClientState } from 'apollo-link-state';\nimport resolvers from './resolvers';\n\nexport default {\n  port: process.env.PORT || 8080,\n  createLink: async ({ cache }) =\u003e\n    withClientState({\n      cache,\n      resolvers,\n      defaults: {\n        visible: false,\n      },\n    }),\n};\n```\n\n- [React GraphQL Link Example](examples/react-graphql-link/README.md)\n\n## How to extend Express with additional middleware?\n\nJust create a `express-server.js` in your project root folder.\n\n_`express-server.js`_\n\n```javascript\nimport morgan from 'morgan';\nimport cors from 'cors';\nimport compression from 'compression';\nimport examples from './examples';\n\nexport default ({ config, app }) =\u003e {\n  app.use(morgan('combined'));\n  app.use(cors());\n  app.use(compression());\n\n  app.use('/api/examples', examples);\n};\n```\n\n- [Express Middleware Example](examples/express-server/README.md)\n\n## How to create a GraphQL server?\n\nJust create a `graphql-server.js` in your project root folder.\n\n_`graphql-server.js`_\n\n```javascript\nexport default ({ config }) =\u003e ({\n  context: ({ req }) =\u003e ({ req, config }),\n  typeDefs: `type Todo {\n      id: ID!\n      description: String!\n      done: Boolean\n    }\n\n    type Query {\n      todos: [Todo]\n    }`,\n  resolvers: {\n    Query: {\n      todos: () =\u003e [{ id: 1, description: 'Demo 1', done: false }],\n    },\n  },\n});\n```\n\n- [GraphQL Server Example](examples/graphql-server/README.md)\n\n## How to add GraphQL subscriptions on the client?\n\n_`config.js`_\n\n```jsx\nimport { split } from 'apollo-link';\nimport { HttpLink } from 'apollo-link-http';\nimport { WebSocketLink } from 'apollo-link-ws';\nimport { getMainDefinition } from 'apollo-utilities';\n\nexport default {\n  port: 8080,\n  createLink,\n};\n\nfunction createLink({ isServer }) {\n  const httpLink = new HttpLink({\n    uri: `http://localhost:8080/graphql`,\n  });\n\n  const wsLink = isServer\n    ? null\n    : new WebSocketLink({\n        uri: `ws://localhost:8080/graphql`,\n        options: {\n          reconnect: true,\n        },\n      });\n\n  return isServer\n    ? httpLink\n    : split(\n        ({ query }) =\u003e {\n          const { kind, operation } = getMainDefinition(query);\n          return kind === 'OperationDefinition' \u0026\u0026 operation === 'subscription';\n        },\n        wsLink,\n        httpLink,\n      );\n}\n```\n\n_`App.js`_\n\n```jsx\nimport React, { Fragment as F } from 'react';\nimport { Subscription } from 'react-apollo';\nimport gql from 'graphql-tag';\n\nconst GRAPHQL_SUBSCRIPTION = gql`\n  subscription OnChanged {\n    changed {\n      id\n      name\n    }\n  }\n`;\n\nexport default async () =\u003e (\n  \u003cSubscription subscription={GRAPHQL_SUBSCRIPTION}\u003e\n    {({ data }) =\u003e \u003cpre\u003e{JSON.stringify(data, null, 2)}\u003c/pre\u003e}\n  \u003c/Subscription\u003e\n);\n```\n\n- [GraphQL Subscription Example](examples/react-graphql-subscription/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMikeBild%2Fracyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMikeBild%2Fracyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMikeBild%2Fracyjs/lists"}