{"id":18951245,"url":"https://github.com/hmmhmmhm/common-gql","last_synced_at":"2026-04-10T23:02:56.101Z","repository":{"id":48015012,"uuid":"188164833","full_name":"hmmhmmhm/common-gql","owner":"hmmhmmhm","description":"🦄 Cross Platform GraphQL Component Design Pattern","archived":false,"fork":false,"pushed_at":"2021-08-11T01:04:45.000Z","size":46,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-01T02:19:25.129Z","etag":null,"topics":["electron","graphql","graphql-client","graphql-js","graphql-schema","graphql-server","graphql-tools","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/hmmhmmhm.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}},"created_at":"2019-05-23T05:05:27.000Z","updated_at":"2019-05-26T08:56:11.000Z","dependencies_parsed_at":"2022-08-12T16:40:52.988Z","dependency_job_id":null,"html_url":"https://github.com/hmmhmmhm/common-gql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmmhmmhm%2Fcommon-gql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmmhmmhm%2Fcommon-gql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmmhmmhm%2Fcommon-gql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmmhmmhm%2Fcommon-gql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmmhmmhm","download_url":"https://codeload.github.com/hmmhmmhm/common-gql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239950431,"owners_count":19723667,"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":["electron","graphql","graphql-client","graphql-js","graphql-schema","graphql-server","graphql-tools","nodejs","typescript"],"created_at":"2024-11-08T13:27:09.839Z","updated_at":"2026-03-28T18:30:19.023Z","avatar_url":"https://github.com/hmmhmmhm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Common GQL\n\n\u003e 🚧  This is a project that is still under development. Don't use it yet.\n\n\u003e 🦄 Cross Platform GraphQL Atomic component Design Pattern (**version 0.1.0**)\n\n\u003e Have you interested like a *Electron-graphql*? You might be need this design pattern. *Common GQL(Graph Query Language)* is a design pattern that helps clients and servers share the GraphQL schema (named Schema by combining typeDefs and resolvers) using the git submodule in multiple environments (Ex. Electron \u0026 Express). This design pattern is based on Apollo graphql + Typescript.\n\n\n\n## GQL-Schema\n\nTo develop Common-GQL, you first clone this repository, upload it to the github repo (or github private repo), and then mount the default schema for the various projects you want through the git submodule.\n\n### Clone\n\n\u003e Here's how to download the starter kit to develop common-gql-schema right away:\n\n```bash\ngit clone common-gql\ncd common-gql\nnpm install\n```\n\n### Install\n\n\u003e When you run the `git submodule add`, you must work in the folder path that you want to create the corresponding module folder.\n\n```bash\ngit submodule add \u003cgit-url\u003e\ngit submodule init\ngit submodule update\nnpm install ./\u003cpath\u003e  --save\n```\n\n### Update\n\n\u003e If the business logic has changed since the installation, you can easily update and apply it in any project by executing the command below.\n\n```bash\ngit submodule update\nnpm install ./\u003cpath\u003e  --save\n```\n\n### Test\n\n\u003e An independent test module exists that can test the GraphQL structure being implemented through the Apollo Playground through common-gql-tester [[Link]](https://github.com/hmmhmmhm/common-gql-tester).\n\n```bash\nnpm install --global common-gql-tester\nnpm test\n```\n\n\n\n\n\n## GQL-Local\n\n\u003e Common-gql-local is a feature that helps you to run GraphQL queries without running a separate server. It is built into a Starter Pack and can be used directly as Import only without installation.\n\n### Import\n\n\u003e **LocalGQL** enables development as like a client were operating a GQL server. This also able gql-based query processing in client-to-client socket.io communication.\n\n\u003e **LocalGQL** can also be operated on the server. Since LocalGQL work to the call by reference rather than a copy a new resolver function, it can have the same effect as sending an Express query through LocalGQL even after the corresponding Resolver is applied to a server such as Express .\n\n```typescript\nimport { LocalGQL } from '../\u003cpath\u003e'\n```\n\n### Query\n\n```javascript\nlet localGQL = new LocalGQL()\n\nlocalGQL.query({\n  query: gql`\n    query {\n\t\t# Type Query statements...\n    }\n  `,\n})\n```\n\n\n\n## GQL-Server\n\n### For express\n\n#### Install\n\n```bash\nnpm install common-gql-express --save\n```\n\n#### Usage\n\n```typescript\nimport { typeDefs, resolvers } from '../\u003cpath\u003e'\nimport { gqlServer } from 'common-gql-express'\n\n\ngqlExpress({typeDefs, resolvers}).applyMiddleware({\n    path: \"/graphql\", /* GraphQL Web Path */\n    app: expressApp /* Express Instance */\n})\n```\n\n\n\n### Other Platform\n\n\u003e  Lists how common-gql is used by a server framework other than express.\n\nTODO: Plan to develop common-gql for all server frameworks supported by Apollo.\n\n\n\n## GQL-Client\n\nPreviously, we used ApolloClient to query various query statements through GQL to retrieve data to transform HTML elements, and we used this client to correct code overall according to platform, such as matching it to Electron and Express to eliminate query statements, and putting in calls to call business logic directly.\n\nHowever, with the `common-gql`, only the `gqlConnector` needs to be pre-written for each environment. Existing GraphQL query statements do not need to be modified as they were written, even if they were Express or Electron.\n\n### Usage\n\n**gqlConnector.ts** (in Electron Embedded  App)\n\n```typescript\nimport { LocalGQL } from '../\u003cpath\u003e'\n\nconst gqlConnector = default new LocalGQL()\nexport gqlConnector\n```\n\n**gqlConnector.ts** (in Express Client-Side App)\n\n```typescript\nimport ApolloClient from 'apollo-boost';\n\nconst gqlConnector = new ApolloClient({\n  uri: 'https://graphql.example.com'\n})\nexport gqlConnector\n```\n\nBy referring to these individually created gqlConnector, you can isolate the Express \u0026 Electron development process and the Common-GQL development process.\n\n\n\n## How it works\n\n\u003e Cleans out the trial and error experienced during the development of the project.\n\n### Client Mocking\n\nTo develop the LocalGQL functionality, we used the mocking function of the apolo client. Originally, this function was implemented to test resolver with client only, but by passing resolver to call by reference only, it was fully utilized for local query purposes. However, when using this, resolvers was not normally merged with typeDefs in the following structures described as the default example in the Apollo document.\n\n```javascript\nimport { ApolloClient } from 'apollo-boost'\nimport { InMemoryCache } from 'apollo-cache-inmemory'\nimport { SchemaLink } from 'apollo-link-schema'\nimport { makeExecutableSchema } from 'graphql-tools'\nimport { typeDefs, resolvers } from './schema'\n\nconst cache = new InMemoryCache()\n\nconst executableSchema = makeExecutableSchema({\n  typeDefs,\n  resolvers,\n  resolverValidationOptions: {\n    requireResolversForResolveType: false,\n  }\n})\n\nconst client = new ApolloClient({\n  link: new SchemaLink({ schema: executableSchema }),\n  cache,\n})\n\nimport gql from 'graphql-tag'\nclient.query({\n  query: gql`\n    query TodoApp {\n      todos {\n        id\n        text\n        completed\n      }\n    }\n  `,\n})\n  .then(data =\u003e console.log(data))\n  .catch(error =\u003e console.error(error));\n```\n\nLater, by connecting resolver separately to `addMockFunctionToSchema` when executing `makeExecutableSchema` in the above process, found that resolver was connected normally, and this solved the problem.\n\n### Mock Function\n\nUsing the 'addMockFunctionToSchema' function above, resolver had to be configured in a different form than the resolver required by the 'apolo-server-core' module. It's about as below.\n\n```javascript\n// client addMockFunctionsToSchema{mocks: resolvers}\n{\n  Query: ()=\u003e ({}),\n  Mutation: ()=\u003e ({})\n}\n\n// server new ApolloServer({resolvers})\n{\n  Query: {},\n  Mutation: {}\n}\n```\n\nTo solve this problem, we forced common gql to develop the basic structure into an absolute arrow function, and then created and applied a function to convert it to resolverMap, which moves over to apolo-server.\n\n\n\n### Solution\n\nThe final configuration is as follows:\n\n```typescript\nconst mockFunctionsToResolverMap = (resolverMap) =\u003e{\n  let mockFunctions = {}\n  for (var key in resolverMap) {\n      if (!resolverMap.hasOwnProperty(key)) continue\n      mockFunctions[key] = resolverMap[key]()\n  }\n  return mockFunctions\n}\n\nconst executableSchema = makeExecutableSchema({typeDefs})\n\naddMockFunctionsToSchema({\n  schema: executableSchema,\n  mocks: resolvers\n})\n\nlet client = new ApolloClient({\n  link: new SchemaLink({ schema: executableSchema }),\n  cache,\n})\n```\n\n\n\n## TODO Plan\n\n- [ ] More atomic resolvers\n\n- [ ] More atomic typeDefs\n\n- [ ] npx based stater-kit\n\n- [ ] graphql resolver typescript interface inspection\n\n  - Youtube [[Link]](https://www.youtube.com/watch?v=6ZSF60zVFow)\n\n  - ```\n    // package.json\n        \"@graphql-codegen/cli\": \"^1.2.0\",\n        \"@graphql-codegen/near-operation-file-preset\": \"^1.2.0\",\n        \"@graphql-codegen/schema-ast\": \"^1.2.0\",\n        \"@graphql-codegen/typescript-operations\": \"^1.2.0\",\n        \"@graphql-codegen/typescript-resolvers\": \"^1.2.0\",\n        \"graphqlgen\": \"^0.6.0-rc9\",\n    \n    // codegen.yml\n    schema: 'graphql/**/*.gql'\n    documents: 'graphql/**/*.gql'\n    generates:\n      src/models.ts:\n        plugins:\n          - typescript\n        config:\n          avoidOptionals: true\n      dist/model.graphql:\n        plugins:\n          - schema-ast\n    ```\n\n\n\n## License\n\nMIT Licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmmhmmhm%2Fcommon-gql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmmhmmhm%2Fcommon-gql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmmhmmhm%2Fcommon-gql/lists"}