{"id":19714682,"url":"https://github.com/quavedev/graphql","last_synced_at":"2025-04-29T19:33:06.962Z","repository":{"id":119413563,"uuid":"257602714","full_name":"quavedev/graphql","owner":"quavedev","description":"Meteor package that allows you to create your GraphQL server and client in a standard way.","archived":false,"fork":false,"pushed_at":"2020-06-28T14:05:12.000Z","size":7,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-05T18:54:04.170Z","etag":null,"topics":["apollo","graphql","meteor","meteor-package"],"latest_commit_sha":null,"homepage":null,"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/quavedev.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":"2020-04-21T13:21:58.000Z","updated_at":"2023-11-03T17:54:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"651f9024-3707-4d71-bb1f-fa1c24ac1d4c","html_url":"https://github.com/quavedev/graphql","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/quavedev%2Fgraphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fgraphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fgraphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fgraphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quavedev","download_url":"https://codeload.github.com/quavedev/graphql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251569684,"owners_count":21610600,"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":["apollo","graphql","meteor","meteor-package"],"created_at":"2024-11-11T22:34:48.730Z","updated_at":"2025-04-29T19:33:06.953Z","avatar_url":"https://github.com/quavedev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quave:graphql\n\n`quave:graphql` is a Meteor package that allows you to create your GraphQL server and client in a standard way.\n  \n## Why\nEvery application that wants to use GraphQL needs to connect some packages and some npm modules. Also need:\n- Declare types and resolvers in separate files\n- Log for errors\n- Connect to Devtools\n\nWe believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).\n  \n## Installation\n\nMeteor package\n```sh\nmeteor add quave:graphql\n```\nServer NPM packages\n```sh\nmeteor npm install graphql-tools graphql-load graphql\n```\nClient NPM packages\n```sh\nmeteor npm install apollo-client apollo-cache-inmemory apollo-link-error apollo-link-ddp\n```\n\n### Usage\n\n#### Server\nIn the server you should call `startGraphQLServer` providing your types and your resolvers. This function needs to be called during the server start so you should place it in the files imported by your main server file.\n\nHere you can check one example of [type](https://github.com/quavedev/graphql/blob/master/DateTimeTypeDef.js) and [resolver](https://github.com/quavedev/graphql/blob/master/DateTimeResolver.js).\n\nSee below how to use it:\n```javascript\nimport { startGraphQLServer } from \"meteor/quave:graphql/server\";\n\nimport { logger } from 'meteor/quave:logs/logger';\n\n\nimport { DateTimeTypeDef } from \"meteor/quave:graphql/DateTimeTypeDef\";\nimport { DateTimeResolver } from \"meteor/quave:graphql/DateTimeResolver\";\n\nconst log = error =\u003e logger.error({ message: 'GraphQL server error', error })\n\nstartGraphQLServer({ typeDefs: [DateTimeTypeDef], resolvers: [DateTimeResolver], log });\n```\n`typeDefs` expects an array of types definitions (schemas) and `resolvers` expects an array of resolvers. You can use a single type definition and a single resolver but usually is better to split them in multiple files. \n\nYou don't need to use `DateTimeTypeDef` and `DateTimeResolver` they are just examples.\n\nYou also don't need to provide a log function, by default it will log to console.error.\n\n#### Client\nIn the client you should call `startGraphQLClient`, this is going to return an Apollo client already configured to you.\n```javascript\nimport { startGraphQLClient } from \"meteor/quave:graphql/client\";\n\nconst apolloClient = startGraphQLClient({ connectToDevTools: true });\n```\nThen you can use the `apolloClient` as you want, see below two examples.\n \n### Optional installations\n\n#### React\nTo use GraphQL with React you probably want to have a provider around your app main component so you need to install `@apollo/react-hooks` \n\n```sh\nmeteor npm install @apollo/react-hooks\n```\n\nthen you can use `ApolloProvider`\n\n```javascript\nimport { startGraphQLClient } from \"meteor/quave:graphql/client\";\n\nimport { ApolloProvider } from '@apollo/react-hooks';\n\nconst apolloClient = startGraphQLClient({ connectToDevTools: true });\n\nMeteor.startup(() =\u003e {\n  render(\n    \u003cApolloProvider client={apolloClient}\u003e\n      \u003cApp/\u003e\n    \u003c/ApolloProvider\u003e, \n    document.getElementById('react-target')\n  );\n});\n```\n\nTo write queries and mutations you are going to use `gql` and so install `graphql-tag`.\n\n```sh\nmeteor npm install graphql-tag\n```\n\nAnd here is how to use with hooks, in this example we are using `useQuery` hook.\n\n```javascript\nimport React from 'react';\nimport gql from 'graphql-tag';\nimport { useQuery } from '@apollo/react-hooks';\n\nconst nowQuery = gql`\n  query Now {\n    now {\n      dateTime\n    }\n  }\n`;\n\nexport const App = () =\u003e {\n  const { loading, error, data } = useQuery(nowQuery);\n\n  console.log('loading', loading);\n  console.log('error', error);\n  console.log('data', data);\n\n  const today = data \u0026\u0026 data.now \u0026\u0026 new Date(data.now.dateTime);\n  const dayOfMonth = today \u0026\u0026 today.getDate();\n  const monthOfYear = today \u0026\u0026 today.getMonth() + 1;\n\n  const welcome = loading ? \u003ch1\u003eloading\u003c/h1\u003e :\n    \u003ch1\u003eWelcome to quave:graphql ({dayOfMonth}/{monthOfYear})!\u003c/h1\u003e;\n\n  return (\n    \u003cdiv\u003e\n      {welcome}\n    \u003c/div\u003e\n  );\n};\n```\n\n#### No React\nYou can use this package in any app to setup GraphQL for you and then you can write queries and mutations using Apollo client or other wrappers, you will probably use `gql` then you should install `graphql-tag`\n\n```sh\nmeteor npm install graphql-tag\n```\nand then use like this\n\n```javascript\nimport { Meteor } from 'meteor/meteor';\nimport { startGraphQLClient } from \"meteor/quave:graphql/client\";\n\nimport gql from 'graphql-tag';\n\nconst apolloClient = startGraphQLClient({ connectToDevTools: true });\n\nMeteor.startup(() =\u003e {\n  apolloClient.query({\n    query: gql`\n      query Now {\n        now {\n          dateTime\n        }\n      }\n    `\n  }).then(({ data: { now }}) =\u003e console.log(now));\n});\n```\n\n## Limitations\n- It's not ready yet for auto-complete queries with IDEs, at least on WebStorm it's not working out-of-box.\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Fgraphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquavedev%2Fgraphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Fgraphql/lists"}