{"id":13451987,"url":"https://github.com/birkir/gatsby-source-graphql-universal","last_synced_at":"2025-04-12T12:04:37.820Z","repository":{"id":33951705,"uuid":"163890994","full_name":"birkir/gatsby-source-graphql-universal","owner":"birkir","description":" Plugin for connecting arbitrary GraphQL APIs to Gatsby GraphQL with client side execution","archived":false,"fork":false,"pushed_at":"2023-01-04T15:31:00.000Z","size":2972,"stargazers_count":20,"open_issues_count":42,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T06:43:28.219Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/birkir.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}},"created_at":"2019-01-02T21:23:08.000Z","updated_at":"2023-02-14T20:53:41.000Z","dependencies_parsed_at":"2023-01-15T03:45:44.753Z","dependency_job_id":null,"html_url":"https://github.com/birkir/gatsby-source-graphql-universal","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/birkir%2Fgatsby-source-graphql-universal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birkir%2Fgatsby-source-graphql-universal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birkir%2Fgatsby-source-graphql-universal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birkir%2Fgatsby-source-graphql-universal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birkir","download_url":"https://codeload.github.com/birkir/gatsby-source-graphql-universal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248367071,"owners_count":21092097,"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":[],"created_at":"2024-07-31T07:01:09.305Z","updated_at":"2025-04-12T12:04:37.775Z","avatar_url":"https://github.com/birkir.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# gatsby-source-graphql-universal\n\n\u003e NOTE: This is an universal version of the official `gatsby-source-graphql` source plugin. It modifies the babel plugins to skip the removal of graphql queries so they can be re-used.\n\n## How to use\n\nThe plugin provides higher order component as well as direct manipulation tools for custom operations\n\n[See TypeScript definitions for more details](/index.d.ts)\n\n\n### Higher-Order Component\n\nThere is a higher order component to wrap components to get access to graphql queries in the browser.\n\n```jsx\nimport { graphql } from 'gatsby';\nimport { withGraphql } from 'gatsby-source-graphql-universal';\n\nexport const fooFragment = graphql`\n  fragment Planet on ...SWAPI_Planet {\n    id\n    title\n  }\n`\n\nexport const query = graphql`\n  query {\n    swapi {\n      ...\n    }\n  }\n`;\n\nexport const Demo = withGraphql(\n  ({ data, graphql }) =\u003e {\n    const onClick = () =\u003e graphql('swapi', {\n      query,\n      fragments: [fooFragment],\n      fetchPolicy: 'network-only',\n      variables: { page: 3 }\n    });\n\n    return (\n      \u003cbutton onClick={onClick}\u003eReload\u003c/button\u003e\n    );\n  }\n);\n```\n\n#### Props\n\n - **`data`**: Same as data from gatsby, but when `graphql()` (below) is called, it will be overwritten with new data when `composeData` prop is set to true.\n\n - **`graphql(fieldName, options): Promise`**\n   - **`fieldName`**: the same fieldName as provided in gatsby-config.js\n   - **`options.query`**: the query variable defined above the component\n   - **`options.fragments`**: list of fragments to inject into the query\n   - **`options.composeData`**: _(default: true)_  will overwrite component gatsby data with composed data from the browser when true\n   - **`...options`** optional parameters to pass to `ApolloClient.query` (sets fetchPolicy to 'network-only' by default)\n\n\n### getIsolatedQuery\n\nThe following code will now result in an object that has the original graphql query source accessible where you are free to do anything with it.\n\n```js\nconst query = graphql\\`...\\`;\n```\n\n```json\n{\n  \"id\": \"1234567\",\n  \"source\": \"{ \\\"swapi\\\": { ... } }\"\n}\n```\n\nYou can get isolated query to your graphql endpoint by re-using the composing function:\n\n```js\nimport { graphql } from 'gatsby';\nimport { getIsolatedQuery } from 'gatsby-source-graphql-universal';\n\nconst query = gatsby`\n  query {\n    siteMetadata {\n      title\n    }\n    swapi {\n      allPersons {\n        ... on SWAPI_Person {\n          id\n        }\n      }\n    }\n  }\n`;\n\nconst onlySwapi = getIsolatedQuery(query, 'swapi', 'SWAPI');\n\n// Output:\n//\n// query {\n//   allPersons {\n//     ... on Person {\n//       id\n//     }\n//   }\n// }\n```\n\n\n\n---\n\n---\n\n### gatsby-source-graphql (previous documentation)\n\nPlugin for connecting arbitrary GraphQL APIs to Gatsby GraphQL. Remote schemas are stitched together by adding a type that wraps the remote schema \nQuery type and putting it under field of Gatsby GraphQL Query.\n\n- [Example website](https://using-gatsby-source-graphql.netlify.com/)\n- [Example website source](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-source-graphql)\n\n\n## Install\n\n`npm install --save gatsby-source-graphql-universal`\n\n## How to use\n\nFirst, you need a way to pass environment variables to the build process, so secrets and other secured data aren't committed to source control. We \nrecommend using [`dotenv`][dotenv] which will then expose environment variables. [Read more about dotenv and using environment variables \nhere][envvars]. Then we can _use_ these environment variables and configure our plugin.\n\n```javascript\n// In your gatsby-config.js\nmodule.exports = {\n  plugins: [\n    // Simple config, passing URL\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        // This type will contain remote schema Query type\n        typeName: \"SWAPI\",\n        // This is field under which it's accessible\n        fieldName: \"swapi\",\n        // Url to query from\n        url: \"https://api.graphcms.com/simple/v1/swapi\",\n      },\n    },\n    // Passing paramaters (passed to apollo-link)\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        typeName: \"GitHub\",\n        fieldName: \"github\",\n        // Url to query from\n        url: \"https://api.github.com/graphql\",\n        // HTTP headers\n        headers: {\n          // Learn about environment variables: https://gatsby.app/env-vars\n          Authorization: `bearer ${process.env.GITHUB_TOKEN}`,\n        },\n        // Additional options to pass to node-fetch\n        fetchOptions: {},\n      },\n    },\n    // Creating arbitrary Apollo Link (for advanced situations)\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        typeName: \"GitHub\",\n        fieldName: \"github\",\n        // Create Apollo Link manually. Can return a Promise.\n        createLink: (pluginOptions) =\u003e {\n          return createHttpLink({\n            uri: 'https://api.github.com/graphql',\n            headers: {\n              'Authorization': `bearer ${process.env.GITHUB_TOKEN}`,\n            },\n            fetch,\n          })\n      },\n    },\n  ],\n}\n```\n\n## How to Query\n\n```graphql\n{\n  # Field name parameter defines how you can access third party api\n  swapi {\n    allSpecies {\n      name\n    }\n  }\n  github {\n    viewer {\n      email\n    }\n  }\n}\n```\n\n## Schema definitions\n\nBy default schema is introspected from the remote schema. Schema is cached in `.cache` in this case and refreshing the schema requires deleting the \ncache.\n\nTo control schema consumption, you can alternatively construct schema definition by passing `createSchema` callback. This way you could, for \nexample, read schema SDL or introspection JSON. When `createSchema` callback is used, schema isn't cached. `createSchema` can return a Promise to \nGraphQLSchema instance or GraphQLSchema instance.\n\n```js\nconst fs = require(\"fs\")\nconst { buildSchema, buildClientSchema } = require(\"graphql\")\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        typeName: \"SWAPI\",\n        fieldName: \"swapi\",\n        url: \"https://api.graphcms.com/simple/v1/swapi\",\n\n        createSchema: async () =\u003e {\n          const json = JSON.parse(\n            fs.readFileSync(`${__dirname}/introspection.json`)\n          )\n          return buildClientSchema(json.data)\n        },\n      },\n    },\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        typeName: \"SWAPI\",\n        fieldName: \"swapi\",\n        url: \"https://api.graphcms.com/simple/v1/swapi\",\n\n        createSchema: async () =\u003e {\n          const sdl = fs.readFileSync(`${__dirname}/schema.sdl`).toString()\n          return buildSchema(sdl)\n        },\n      },\n    },\n  ],\n}\n```\n\n# Refetching data\n\nBy default, `gatsby-source-graphql-universal` will only refetch the data once the server is restarted. It's also possible to configure the plugin to \nperiodically refetch the data. The option is called `refetchInterval` and specifies the timeout in seconds.\n\n```js\nmodule.exports = {\n  plugins: [\n    // Simple config, passing URL\n    {\n      resolve: \"gatsby-source-graphql-universal\",\n      options: {\n        // This type will contain remote schema Query type\n        typeName: \"SWAPI\",\n        // This is field under which it's accessible\n        fieldName: \"swapi\",\n        // Url to query from\n        url: \"https://api.graphcms.com/simple/v1/swapi\",\n\n        // refetch interval in seconds\n        refetchInterval: 60,\n      },\n    },\n  ],\n}\n```\n\n[dotenv]: https://github.com/motdotla/dotenv\n[envvars]: https://gatsby.app/env-vars\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirkir%2Fgatsby-source-graphql-universal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirkir%2Fgatsby-source-graphql-universal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirkir%2Fgatsby-source-graphql-universal/lists"}