{"id":21190108,"url":"https://github.com/reactiumcore/reactium-graphql-plugin","last_synced_at":"2025-08-10T23:34:48.151Z","repository":{"id":251431525,"uuid":"837394853","full_name":"ReactiumCore/Reactium-GraphQL-Plugin","owner":"ReactiumCore","description":"GraphQL Apollo Client plugin for Reactium","archived":false,"fork":false,"pushed_at":"2024-08-21T13:25:02.000Z","size":1411,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-26T03:38:16.667Z","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/ReactiumCore.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":"2024-08-02T21:51:34.000Z","updated_at":"2024-08-21T13:25:05.000Z","dependencies_parsed_at":"2025-03-14T20:44:23.718Z","dependency_job_id":"7b587785-0413-4812-b915-1c50e5f20f3f","html_url":"https://github.com/ReactiumCore/Reactium-GraphQL-Plugin","commit_stats":null,"previous_names":["reactiumcore/reactium-graphql-plugin"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ReactiumCore/Reactium-GraphQL-Plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2FReactium-GraphQL-Plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2FReactium-GraphQL-Plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2FReactium-GraphQL-Plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2FReactium-GraphQL-Plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReactiumCore","download_url":"https://codeload.github.com/ReactiumCore/Reactium-GraphQL-Plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactiumCore%2FReactium-GraphQL-Plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269806126,"owners_count":24478126,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"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-20T18:59:27.635Z","updated_at":"2025-08-10T23:34:48.113Z","avatar_url":"https://github.com/ReactiumCore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reactium GraphQL Plugin\n\nProvides an Apollo GraphQL client to your Reactium project.\n\n## About this Repository\nThis repository is a mono-style repo (for publishing the @reactium/graphql Reactium module to the Reactium registry), but it's also a Reactium project itself, complete with an example deno GraphQL server and a Reactium example front-end that uses the @reactium/graphql module.\n\nSee below for if you want to play around with this repository in your local environment.\n\n## Install\n\nTo install this module in your own Reactium project:\n\n```sh\nnpx reactium install @reactium/graphql\n```\n\nSee [Configuration](#configuration) for environment variables to setup the plugin to work with your GraphQL server.\n\n\u003e By default looks for http://localhost:4000/graphql Change the `GRAPHQL_URL` environment variable if needed.\n\n## Usage\n\nSee [Apollo Client (React)](https://www.apollographql.com/docs/react) documentation for full details.\n\nThis plugin already sets up the Apollo client as a context provider for the Reactium application, so you can begin using the `gql` with React hooks immediately.\n\n```jsx\nimport { gql, useQuery } from '@apollo/client';\nimport React from 'react';\n\nconst GET_USERS = gql`\n    query GetUsers {\n        users {\n            id\n            name\n            email\n        }\n    }\n`;\n\nexport const UsersList = () =\u003e {\n    const { loading, error, data } = useQuery(GET_USERS);\n    if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n    else if (error) return \u003cdiv\u003eError: {error}\u003c/div\u003e;\n    const { users } = data;\n\n    return (\n        \u003cul\u003e\n            {users.map(({ id, name, email }) =\u003e (\n                \u003cli key={id}\u003e\n                    {name}: {email}\n                \u003c/li\u003e\n            ))}\n        \u003c/ul\u003e\n    );\n};\n```\n\n## Reactium Specific Hooks\n\nWhen this module is installed in a Reactium project, it exposes it's own React hooks in the @reactium/graphql workspace. See the [TypeDoc for this module](https://reactiumcore.github.io/Reactium-GraphQL-Plugin/).\n\n* **useSyncQuery**: Wraps the Apollo GraphQL query hook, but makes it into a [ReactiumSyncState object](https://reactiumcore.github.io/reactium-sdk-core/classes/ReactiumSyncState.html) for easier memory state management. For those used to the Reactium improved [useSyncState hook](https://reactiumcore.github.io/reactium-sdk-core/functions/useSyncState.html) for improved component state management, with imperative state updates, as well as EventTarget extensibility and observability.\n\n  ```jsx\n    import { gql } from '@apollo/client';\n    import Container from 'react-bootstrap/Container';\n    import Row from 'react-bootstrap/Row';\n    import Col from 'react-bootstrap/Col';\n    import { useHookComponent } from 'reactium-core/sdk';\n    import { useSyncQuery } from '@reactium/graphql';\n\n    const LOAD_DASHBOARD_DATA = gql`\n        query LoadDashboardDat($nums: [Int!]!) {\n            users {\n                id\n                name\n                email\n            }\n\n            posts {\n                id\n                title\n                body\n            }\n\n            add(nums: $nums)\n        }\n    `;\n\n    export const Dashboard = () =\u003e {\n        // Get registered components\n        const PostList = useHookComponent('PostList');\n        const UserList = useHookComponent('UserList');\n\n        const handle = useSyncQuery(LOAD_DASHBOARD_DATA, {\n            variables: { nums: [0, 1] },\n        });\n\n        return (\n            \u003cContainer fluid as='main'\u003e\n                \u003ch1\u003eDashboard {handle.get('data.add')}\u003c/h1\u003e\n                \u003cRow\u003e\n                    \u003cCol\u003e\n                        \u003cUserList\n                            loading={handle.get('loading', false)}\n                            error={handle.get('error')}\n                            users={handle.get('data.users', [])}\n                        /\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n\n                \u003cRow\u003e\n                    \u003cCol\u003e\n                        \u003cPostList\n                            loading={handle.get('loading', false)}\n                            error={handle.get('error')}\n                            posts={handle.get('data.posts', [])}\n                        /\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n            \u003c/Container\u003e\n        );\n    };\n\n    export default Dashboard;\n  ```\n\n## Configuration\n\nThere are a number of environment variables that this module will use in your Reactium project.\n\n- **GraphQL Playground** - Enabled by default in local development, disabled by default in production environment. To set the playground URL **(Defaults to `/playground`)**, set the environment variable `GRAPHQL_PLAYGROUND_URL`\n  \n  ```bash\n  export GRAPHQL_PLAYGROUND_URL=\"/my-playground\"\n  ```\n\n  To enable playground in production, set `GRAPHQL_PLAYGROUND_ENABLED=on`\n- **GraphQL Server URL** - To set the GraphQL server URL (defaults to localhost:4000/graphql):\n    ```bash\n    export GRAPHQL_URL=\"https://my.graphql.host/graphql\"\n    ```\n- **GraphQL Proxy** - Enabled by default, Reactium will proxy `/graphql` to the GraphQL Server URL (See above). If this behavior is disabled, the Apollo Client will use your server URL directly (You will be responsible for setting up your GraphQL Server for [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)). To disable proxy behavior:\n    \n    ```bash\n    export GRAPHQL_PROXY_ENABLED=\"off\"\n    ```\n\n    The default proxy URL (provided by http-proxy middleware) for your GraphQL api is `/graphql`. To change this:\n\n    ```bash\n    export GRAPHQL_PROXY_URL=\"/my-graphql-api\"\n    ```\n    \u003e Note: Changing this proxy URL will also change the default GraphQL Server URL (unless you have set it with `GRAPHQL_URL`)\n\n## Using this demo GraphQL server\n\nThis repository has an example deno server that runs a GraphQL server.\n\nSee `./GraphQLServer` for the deno server. You will need to have [deno installed](https://docs.deno.com/runtime/manual/) and configure your local mongo instance credentials, by adding the `MONGODB_URI` variable to `./GraphQLServer/.env`:\n\n```\nMONGODB_URI=mongodb://deno:denopwd@localhost:27017/deno\n```\n\u003e Example local mongodb URI\n\nI'd also recommend installing [denon](https://deno.land/x/denon@2.5.0/docs/installation.md?source=) (like nodemon for deno) for easy startup of the server locally:\n\n```sh\ncd ./GraphQLServer\ndenon start\n```\n\n## Starting the UI\n\nThis repository includes a Reactium project with a UI that can interact with the included Deno server.\n\nTo start the UI:\n\n```sh\nnpx reactium install # first time to install dependencies (includes npm dependencies as well)\nnpm run local\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Freactium-graphql-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactiumcore%2Freactium-graphql-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactiumcore%2Freactium-graphql-plugin/lists"}