Updated link packages to use Apollo 3

lukeramsden commented 4 years ago

Issue #: #525

Description of changes: Updated imports to use the new scoped @apollo/client imports. Also bumped version number of both packages to 3.0.0 due to this most likely being a breaking change for consumers (although all tests pass on my machine!)

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

joebernard commented 4 years ago

This PR resolves a dependency on apollo-client which is blocking my upgrade to Apollo 3. Can this be released with a @next or @unstable tag while it waits for review?

lukeramsden commented 4 years ago

Not sure how the ^ operator works in relation to beta's and rc's, but a somebody with write access to this repo should probs close this and push their own commit that pins it to at-least rc12.

@joebernard You can use the versions I published to NPM if you'd like, and then force the latest version of Apollo via resolutions in package.json:

    "@lukeramsden/aws-appsync-auth-link": "^3.0.0",
    "@lukeramsden/aws-appsync-subscription-link": "^3.0.0",
    ///
    "resolutions": {
      "@apollo/client": "3.0.0-rc.12"
    },

(note: I don't actually know if it'll like that, I don't use the links anymore, I'm on a dif backend since I opened the PR. Worth trying though)

joebernard commented 4 years ago

Thanks @lukeramsden that is very helpful.

@manueliglesias @elorzafe Do you have any input on how we might get this update rolled out? I understand that Apollo 3 is still in beta but perhaps we could get an @unstable tag released?

BenoitDel commented 4 years ago

apollo client 3.0 has reached stable version

kamalbennani commented 4 years ago

Any news regarding this issue?

ianmartorell commented 4 years ago

This would be great now that Apollo 3 has been released! I'm currently staying on Apollo 2 to avoid having to import both versions and dealing with type inconsistencies.

crimson-med commented 4 years ago

Any update on this?

hutber commented 4 years ago

I'm sad this hasn't been merged yet :(

mikedizon commented 4 years ago

I'm sad this hasn't been merged yet :(

Are you surprised?

hutber commented 4 years ago

lol @mikedizon I am a little bit ye. Its a pretty big package and its awslabs.... I assumed they were on salary, but maybe I am mistaken?

sammartinez commented 4 years ago

@lukeramsden Can you look to resolve the conflicts ?

hutber commented 4 years ago

It would also make sense to update the deps for apollo/client as its out of beta now.

undefobj commented 4 years ago

@elorzafe @manueliglesias @sammartinez my vote is for option 2 as this gets the links in hands of customers.

sammartinez commented 4 years ago

@elorzafe @manueliglesias @sammartinez my vote is for option 2 as this gets the links in hands of customers.

Im in agreement, lets look to do this today then @manueliglesias and @undefobj since @elorzafe is out

khitrenovich commented 4 years ago

Do you have plans to release updated aws-appsync-auth-link and aws-appsync-subscription-link versions?

manueliglesias commented 4 years ago

Hi,

The link packages are published in npm under the @latest dist tag

     "@apollo/client": "^3.2.1",
     "aws-appsync-auth-link": "^3.0.1",
     "aws-appsync-subscription-link": "^3.0.1",

tested with:

import { ApolloClient, from, gql, HttpLink, InMemoryCache, split } from "@apollo/client";
import { AUTH_TYPE, createAuthLink } from "aws-appsync-auth-link";
import { createSubscriptionHandshakeLink } from "aws-appsync-subscription-link";
import React, { useEffect } from "react";
import "./App.css";
import awsConfig from "./aws-exports";
import logo from "./logo.svg";

const httpLink = new HttpLink({
  uri: awsConfig.aws_appsync_graphqlEndpoint,
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
    createAuthLink({
      url: awsConfig.aws_appsync_graphqlEndpoint,
      auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: awsConfig.aws_appsync_apiKey,
      },
      region: awsConfig.aws_appsync_region,
    }),
    split(op => {
      const {operation} = op.query.definitions[0] as any;

      if(operation === 'subscription') {
        return false;
      }

      return true;
    }, httpLink, createSubscriptionHandshakeLink(
      {
        auth: {
          type: AUTH_TYPE.API_KEY,
          apiKey: awsConfig.aws_appsync_apiKey,
        },
        region: awsConfig.aws_appsync_region,
        url: awsConfig.aws_appsync_graphqlEndpoint,
      },
      httpLink
    ))
  ]),
});

function App() {
  useEffect(() => {

    const sub = client.subscribe({
      query: gql`subscription S {
        onCreateNote{
          id
        }
      }`
    }).subscribe(console.warn);

    return () => sub.unsubscribe();

  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button onClick={testClient}>TEST</button>
      </header>
    </div>
  );

  async function testClient() {
    const result = await client.query({
      query: gql`query Q {
        syncNotes {
          items {
            id
          }
        }
      }`
    });

    console.log({result});
  }
}

export default App;

aws-exports.js (generated by Amplify CLI)

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_appsync_graphqlEndpoint": "https://xxxxxxxxxxxxxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-xxxxxxxxxxxxxxxxxx"
};

colinwilliams commented 4 years ago

Looks like aws-appsync-subscription-link still depends on the old version of aws-appsync-auth-link: https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/master/packages/aws-appsync-subscription-link/package.json#L23

Should that be updated? It ends up pulling Apollo 2 into the dependency graph.

manueliglesias commented 4 years ago

Should that be updated? It ends up pulling Apollo 2 into the dependency graph.

Good catch @colinwilliams , I'll look into it

manueliglesias commented 4 years ago

@colinwilliams New versions to address this are in npm:

❯ npx lerna exec --scope aws-appsync-auth-link --scope aws-appsync-subscription-link npm info $\LERNA_PACKAGE_NAME name version
lerna info version 2.11.0
lerna info versioning independent
lerna info scope [ 'aws-appsync-auth-link', 'aws-appsync-subscription-link' ]
name = 'aws-appsync-auth-link'
version = '3.0.2'
name = 'aws-appsync-subscription-link'
version = '3.0.3'

Apollo 2 no longer shows in the dependency graph:

❯ yarn list --pattern aws
yarn list v1.22.5
├─ aws-appsync-auth-link@3.0.2
├─ aws-appsync-subscription-link@3.0.3
├─ aws-sdk@2.764.0
├─ aws-sign2@0.7.0
└─ aws4@1.10.1
✨  Done in 0.55s.
❯ yarn list --pattern apollo
yarn list v1.22.5
├─ @apollo/client@3.2.1
└─ apollo-utilities@1.3.4
✨  Done in 0.57s.

James-Reed-cognito commented 4 years ago

@manueliglesias thanks for this example, it works perfectly. Does this allow for offline stuffs as well, or no?

CodySwannGT commented 3 years ago

Anything change here? I'm using the example and I'm getting this on subscriptions:

https://www.dropbox.com/s/splibjoysggqe3t/Screen%20Shot%202021-04-08%20at%203.33.04%20PM.png?dl=0

Connection failed: {"errors":[{"errorType":"BadRequestException","message":"The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method. Consult the service documentation for details.\n\nThe Canonical String for this request should have been\n'POST\n/graphql\n\naccept:/\ncontent-type:application/json; charset=UTF-8\nhost:72wbtuzs6ff2ljhuvlun4rxeqe.appsync-api.us-east-1.amazonaws.com\nx-amz-date:20210408T193145Z\nx-amz-security-token:IQoJb3JpZ2luX2VjEAwaCXVzLWVhc3QtMSJGMEQCIHcyJHWAmzuCyLl8GRapSnUlBw/QSXTaVZC4JwbFRbOOAiByZLIQRuoj1usmqEZkWciLPl5R3kdVxG0TYa8xCmBcrSqRBghlEAEaDDEwMjA0MTEyMDUyMCIMryikg1ixp7tsaRPhKu4FoHORnDRYU7omcNmGUp1ssaiTSnGhJ+esxxL/A/AgfnfsvODTnubLS/wiQIfXFIQQodagwUOa8TQsL5Wg2x6xjeO7Fk25YJKJM2fk/JyMW44Z/x+zRbtwVDOFneFlr+IJ/7uS5Q6UMDMvnSh805an3vKBMqQSu8Xd+U5PhxKePyHS7xiy5uSqD/gRXBhuSLPXRQJ9/ep24L5eeqCnmT1oqJKUXGC4DZaesKFnn7+yEYkMpCNoiWuwbI2QyIcAySlNn318pvOPht/cN+xdg766YAijB5VNjA7oZaU+zWNuDsuRQKNkM1eC8V2WlmERyIClfqJ1ghbHfMofIVXN21a/tSmCCORh4NGq2oNHHAz8nY5U2g1BI/Q9GHV6pwDRy1Fz/bQJu5ac48H7F/yeMhBy7w9EYUYam4x6HIL7UmdYDf1kV/379rS+BRg0iAJyBHXLMhMIGgGt2goWIbhm7mU/yY2Wp11XFyKj4WbNJ8p31j0q4WR4HmWRMle93b4S8+aq9/Ch8cTXDsM7rPqiqJghxmE7KpbiMrJRGmagzVZdLqI9+JaOK05AzKYqgNCmZik1nZjLagX0M88Fvhvm+wSEHEyCaJZzHGF+eHo7eCsFPDotOgfJ9r/MO7ASEtN3nAWff2dCPjCVOrYBAiz+jZ4wQj8KpF8xEeiguiT4/Hvz1YzSdt7yodPwE/LvYKqbsNlPYwe4kQ5MFEnMzU7DNLTo80+bOrSX20zdPuYN3ANk7GES/d/WZF/lpGm7IkDPH1DK27fT7OjaxR4kBLfBk7z6bYm2aaC9B8Tff7wjCoQ5qZ794m992KebmwI2y4kPQrFZsmyQDuOOf/AYRxVrW6CmBwJLS9H4gQiMv37pU5XHRxc+XUMD4p5hmNub78Q7w0g35hWZR4Hv6SkXDRuF75Og9zRyTiYH92+BgPEDB3nl+htY0fvjcmPrXcYB1zW/QpmyKd3A3U5//kkLJoJTfv4uU4OVWdtPYvKlL+b2/maMMKG0vYMGOogCsQ6O4srwDpbGhJSBr2l0PjbeAOc/BM9vq6ZKSwFZE5C0OZLm9JILnxj8XUpz1Oxw3t0IN0CfnNNm7lX9yzwdnujRfCMwGfkewBiXHr7h3pgCqAxdYBVbVV/iK/91UVZhkmSeTtr0Nx+Cs3Y3Uge/Py9eiLwJzX0MkdoDuVAVa0O9P2qOOeCWN7zTKtwR/xxntolj6Q8ztm1F8s2qUcJDB8gOW3btpKqUmvlL7yhOkPrKOJ9vfUNf+7agflfVxw6YaWwF9tXsZ2xLuemR3w8rTFId9pY1i4G/EexdApQcX5mb5HnSUIifLo7f91+3b28ur09aZ8LqVhRMEAw+6bAy7g6KrSQapmID\n\naccept;content-type;host;x-amz-date;x-amz-security-token\n16981f65eb3d008e35a503f8f3ae4ed44557684fa879763eb19f274c444c5ddb'\n\nThe String-to-Sign should have been\n'AWS4-HMAC-SHA256\n20210408T193145Z\n20210408/us-east-1/appsync/aws4_request\n2296a4d8575aa53a9acc41ce83e980ac631582ac96cfcd2cc63bc4f6ccb51729'\n"}]}

awslabs / aws-mobile-appsync-sdk-js

Updated link packages to use Apollo 3 #561