{"id":13533422,"url":"https://github.com/wolfeidau/appsync-apollo-links","last_synced_at":"2025-04-01T21:32:17.371Z","repository":{"id":41715015,"uuid":"240628530","full_name":"wolfeidau/appsync-apollo-links","owner":"wolfeidau","description":null,"archived":true,"fork":false,"pushed_at":"2023-01-05T07:19:36.000Z","size":4163,"stargazers_count":27,"open_issues_count":24,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-02T20:33:08.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wolfeidau.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":"2020-02-15T01:43:46.000Z","updated_at":"2024-01-12T17:15:48.000Z","dependencies_parsed_at":"2023-02-03T18:01:03.199Z","dependency_job_id":null,"html_url":"https://github.com/wolfeidau/appsync-apollo-links","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/wolfeidau%2Fappsync-apollo-links","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfeidau%2Fappsync-apollo-links/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfeidau%2Fappsync-apollo-links/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfeidau%2Fappsync-apollo-links/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wolfeidau","download_url":"https://codeload.github.com/wolfeidau/appsync-apollo-links/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713370,"owners_count":20821877,"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-08-01T07:01:19.716Z","updated_at":"2025-04-01T21:32:16.798Z","avatar_url":"https://github.com/wolfeidau.png","language":"TypeScript","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"readme":"# appsync-apollo-links\n\nThis is an demonstrating the ability to pair back the libraries you use to the minimum supported without offline support. This example uses the [apollo client](https://www.apollographql.com/) with react hooks.\n\nThis example is built on [Create React App](https://create-react-app.dev).\n\n# Configuration\n\nYou MUST create a new `src/aws-exports.ts` file containing the settings, in this example is the cognito pool setup.\n\n```ts\n\nexport default {\n  aws_user_pools_id: \"XX-XXXX-X_abcd1234\",\n  aws_cognito_identity_pool_id:\n    \"XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab\",\n  aws_user_pools_web_client_id: \"a1b2c3d4e5f6g7h8i9j0k1l2m3\",\n  aws_cognito_region: \"XX-XXXX-X\",\n  aws_mandatory_sign_in: true,\n  oauth: {\n    domain: \"YOUR_DOMAIN_NAME.auth.XX-XXXX-X.amazoncognito.com\",\n    scope: [\n      \"phone\",\n      \"email\",\n      \"profile\",\n      \"openid\",\n      \"aws.cognito.signin.user.admin\"\n    ],\n    redirectSignIn: \"https://localhost:3000/auth/callback\",\n    redirectSignOut: \"https://localhost:3000/auth/logout\",\n    responseType: \"code\" // or 'token', note that REFRESH token will only be generated when the responseType is code\n  },\n  aws_appsync_graphqlEndpoint: \"https://XXXX.appsync-api.XX-XXXX-X.amazonaws.com/graphql\",\n  aws_appsync_region: \"XX-XXXX-X\",\n  aws_appsync_authenticationType: \"AMAZON_COGNITO_USER_POOLS\"\n}\n```\n\n# Development\n\n```\nnpm start\n```\n\n# Subscriptions\n\nI used the `Event App` example schema and added one extra subscription to the `Subscription` type.\n\n```graphql\n\tsubscribeToEvents: Event\n\t\t@aws_subscribe(mutations: [\"createEvent\"])\n```\n\n# Code\n\nThe core of this solution is in [App.tsx](src/App.tsx) file.\n\n```ts\nimport React from \"react\";\nimport \"./App.css\";\nimport awsconfig from \"./aws-exports\";\nimport { ApolloLink } from \"apollo-link\";\nimport { createSubscriptionHandshakeLink } from \"aws-appsync-subscription-link\";\nimport { createAuthLink } from \"aws-appsync-auth-link\";\nimport ApolloClient from \"apollo-client\";\nimport { InMemoryCache } from \"apollo-cache-inmemory\";\nimport { ApolloProvider } from \"react-apollo\";\nimport EventList from \"./EventList\";\nimport LatestEvents from \"./LatestEvents\";\n\nimport Auth from \"@aws-amplify/auth\";\nimport useAmplifyAuth from \"./useAmplifyAuth\";\n\nAuth.configure(awsconfig);\n\nconst getAccessToken = (): Promise\u003cstring\u003e =\u003e {\n  return Auth.currentSession().then(session =\u003e {\n    return session.getAccessToken().getJwtToken();\n  });\n};\n\nconst config = {\n  url: awsconfig.aws_appsync_graphqlEndpoint,\n  region: awsconfig.aws_appsync_region,\n  auth: {\n    type: awsconfig.aws_appsync_authenticationType,\n    jwtToken: getAccessToken\n  },\n  disableOffline: true\n};\n\nconst link = ApolloLink.from([\n  // @ts-ignore\n  createAuthLink(config),\n  // @ts-ignore\n  createSubscriptionHandshakeLink(config)\n]);\n\nexport const client = new ApolloClient({\n  link,\n  cache: new InMemoryCache({ addTypename: false })\n});\n\nconst App = () =\u003e {\n  const {\n    state: { user },\n    handleSignout\n  } = useAmplifyAuth();\n\n  return !user ? (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e Auth.federatedSignIn()}\u003eOpen Hosted UI\u003c/button\u003e\n    \u003c/div\u003e\n  ) : (\n    \u003cdiv className=\"App\"\u003e\n      \u003cbutton onClick={handleSignout}\u003eSign Out\u003c/button\u003e\n      \u003cEventList /\u003e\n      \u003cLatestEvents /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst WithProvider = () =\u003e (\n  \u003cApolloProvider client={client}\u003e\n    \u003cApp /\u003e\n  \u003c/ApolloProvider\u003e\n);\n\nexport default WithProvider;\n```\n\n# Links \n\n* https://create-react-app.dev/docs/adding-typescript/\n* https://www.apollographql.com/docs/react/development-testing/static-typing/\n* https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/450\n* https://github.com/awslabs/aws-mobile-appsync-sdk-js#using-authorization-and-subscription-links-with-apollo-client-no-offline-support\n\n# License\n\nThis code was authored by [Mark Wolfe](https://github.com/wolfeidau) and licensed under the [Apache 2.0 license](http://www.apache.org/licenses/LICENSE-2.0).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfeidau%2Fappsync-apollo-links","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolfeidau%2Fappsync-apollo-links","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfeidau%2Fappsync-apollo-links/lists"}