<p>apollo-link-ws: 초기 설정 후 connectionParams(및 토큰)를 변경하는 방법은 무엇입니까?</p>

connectionParams에서 객체로 해석되는 함수를 사용할 수 있습니다.

    const wsLink = new WebSocketLink({
      uri: config.subscriptionURL,
      options: {
        reconnect: true,
        connectionParams: () => ({
          authToken: reduxStore.getState().authentication.token,
        }),
      },
    });

편집하다:

오 잠깐, 이것은 처음 이후에 호출되지 않습니다... onOperation 서버 측으로 구문 분석할 수 있는 응답에 인증 개체를 넣는 다른 미들웨어와 연결될 수 있습니까?

다음은 내가 ApolloClient V1에서 하던 방식을 모델로 하여 준비한 것입니다.

페이로드에 인증 토큰을 첨부하는 새 링크 미들웨어 추가

const authMiddleware = new ApolloLink((operation, forward) => {
    // Add the authorization to the headers for HTTP authentication
    operation.setContext({
      headers: {
        authorization: `Bearer ${authToken()}`,
      },
    });

    // Add onto payload for WebSocket authentication
    (operation as Operation & { authToken: string | undefined }).authToken = authToken();


    return (forward as any)(operation);
  });

const myLink = concat(myLink, wsLink);

그런 다음 서버 측에서 확인하고 onOperation 후크를 사용하여 컨텍스트에 적용할 수 있습니다.

function configureDecodeTokenSocketMiddleware(authURL: string) {
  return async function decodeTokenSocketMiddleware<ConnectionParams extends { authToken: string }>(connectionParams: ConnectionParams, operationParams: object) {
    let authPayload;
    try {
      if (typeof connectionParams.authToken === 'string') {
        authPayload = await verifyJWT(authURL, connectionParams.authToken);
      } else {
        throw new Error('Auth Token not available');
      }
    } catch(e) {
      authPayload = {};
    }
    return {
      ...operationParams,
      context: {
        authentication: authPayload,
      },
    };
  };
}

new SubscriptionServer({
      execute,
      subscribe,
      schema,
      onOperation: configureDecodeTokenSocketMiddleware(appConfig.authURL),
    }, {
      server: appConfig.server,
      path: `/${appConfig.subscriptionsEndpoint}`,
    });

어쩌면 이 메시지를 다시 보낼 수 있습니다. https://github.com/apollographql/subscriptions-transport-ws/blob/master/src/client.ts#L507

      const payload: ConnectionParams = typeof this.connectionParams === 'function' ? this.connectionParams() : this.connectionParams;
      this.sendMessage(undefined, MessageTypes.GQL_CONNECTION_INIT, payload);

이 작업을 수행하는 데 권장되는 방법이 있습니까?

구독 이 문제

새로운 WebSocketLink 는 여전히 subscriptions-transport-ws 의 인스턴스를 생성하므로 WebSocketLink가 아닌 Subscription Transport 클라이언트에 미들웨어를 수동으로 적용하고 있습니다.

v1에서와 동일한 프로세스를 사용하고 있지만 WebSocketLink API의 일부로 포함하지 않는 것이 다소 해커처럼 느껴집니다.

// create the web socket link
const wsLink = new WebSocketLink({
  uri: 'ws://example.com',
  options: {
    reconnect: true
  }
})
// create my middleware using the applyMiddleware method from subscriptions-transport-ws
const subscriptionMiddleware = {
  applyMiddleware (options, next) {
    options.auth = { ... }
    next()
  }
}
// add the middleware to the web socket link via the Subscription Transport client
wsLink.subscriptionClient.use([subscriptionMiddleware])

옵션 개체에 추가하는 모든 값은 서버 측의 onOperation 콜백에서 사용할 수 있습니다.

또한이 문제가
@jbaxleyiii 어떤 생각이 있습니까?

몇 주 전에 솔루션(? 제 경우에는 작동 중입니다)을 만들었습니다.

GraphQLModule app.module.ts 가져왔습니다.

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { Apollo, ApolloModule } from 'apollo-angular';
import { HttpLinkModule } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';

@NgModule({
  exports: [
    ApolloModule,
    HttpClientModule,
    HttpLinkModule
  ]
})
export class GraphQLModule {
  public subscriptionClient: SubscriptionClient = null;

  constructor(apollo: Apollo) {
    const wssEndpoint = 'wss://your-domain.com/subscriptions';
    // It's required to define connectionParams as function, as otherwise the updated token is not transferred
    const connectionParams = () => {
      const token = sessionStorage.getItem('token');
      return token ? { 'Authorization': 'token ' + token } : {};
    };

    const wsLink = new WebSocketLink({
      uri: wssEndpoint,
      options: {
        connectionParams: connectionParams,
        reconnect: true
      }
    });
    this.subscriptionClient = (<any>wsLink).subscriptionClient;

    const cache = new InMemoryCache({});

    apollo.create({
      link: wsLink,
      cache: cache.restore(window[ '__APOLLO_CLIENT__' ]),
      connectToDevTools: true,
      queryDeduplication: true
    });
  }
}

내 인증 서비스에서 private graphQLModule: GraphQLModule 를 통해 생성자에 이 모듈을 주입하고 있습니다.
로그인 또는 로그아웃 후 다음 작업을 수행합니다.

const client = this.graphQLModule.subscriptionClient;
// Close actual connection
client.close(true, true);
// todo: set/unset session token in sessionStorage
// Connect again
(<any>client).connect();

이렇게 하면 앱 시작 시 구독 클라이언트가 열리고 로그인/로그아웃 시 완전히 다시 초기화됩니다.

이상적으로 이것은 우리가 할 수 있는 토큰을 비동기식으로 가져와야 하는 경우에도 함수를 반환하는 약속을 지원합니다.

@clayne11 확실하지 않습니다. React-Native의 AsyncStorage를 connectionParams로 사용하려고 합니다. 그러나 내가 추가한 비동기 때문에 서버에 정의되지 않은 상태로 계속 보냅니다.
문제가 있습니까?

업데이트:
이 문제를 해결하지만 아직 마스터 브랜치에 병합되지 않은 풀 요청 이 있습니다.

@jonathanheilmann , 귀하의 솔루션은 @helios1138 원래 해결 방법과 유사합니다. 그러나 구독 클라이언트에 대한 connect() API는 비공개로 표시되며 이상적으로는 사용하지 않아야 합니다.

공개 API이고 강제로 다시 연결해야 하는 subscriptionClient.close(false, false) 를 시도했지만 작동하지만 여전히 구독이 작동하지 않습니다. 현재 작동하는 유일한 것은 다음과 같습니다.

subscriptionClient.close();
subscriptionClient.connect(); // this is a private API :-(

이에 대한 새로운 아이디어가 있습니까? 여기에 솔루션이 있는 것을 좋아합니다. 로드할 때 내 apollo 링크를 생성하지만 일단 내 사용자가 id에 로그인하면 컨텍스트에서 전송되는 토큰을 업데이트하는 것을 정말 좋아합니다.

이것이 우리가 생각해낼 수 있는 최고의 솔루션입니다: https://github.com/apollographql/apollo-server/issues/1505.

context 는 모든 작업에서 생성되며 사용자를 동적으로 조회하기만 하면 됩니다.

이것은 나에게 도움이되었습니다.
https://github.com/apollographql/apollo-link/issues/446#issuecomment -410073779

웹 소켓 채널이 열리면(Authorization 헤더 = 토큰 AAA 포함) 웹 소켓 링크를 사용하는 각 후속 요청은 항상 AAA 토큰으로 식별됩니다.

또는 각 요청에 대해 다른 Authorization 헤더를 보내는 방법이 있습니까(다른 ws 채널을 다시 여는 것 제외)?

ws에 대한 저수준 프로토콜에서 무슨 일이 일어나고 있는지 이해하고 싶습니다.

답장해주셔서 감사합니다!

여기까지 내 코드가 있습니다(하나의 토큰으로 올바르게 작동함).

const wsClient = new SubscriptionClient(
  graphqlEndpoint,
  {
    reconnect: true,
    connectionParams: () => ({
      headers: {
        'Authorization': 'mytokenAAA',
      },
    }),
  },
  ws,
);
const link = new WebSocketLink(wsClient);

makePromise(execute(link, options)); // that's using token AAA
// how to make another query (execute) using token BBB without creating another link ?

@sulliwane @RyannGalea @jonathanheilmann @helios1138 토큰/연결 매개변수를 동적으로 업데이트하려면 SubscriptionClient의 미들웨어를 사용하여 설정해야 합니다. 여기에서 내 요점을 참조하십시오. https://gist.github.com/cowlicks/71e766164647f224bf15f086ea34fa52

const subscriptionMiddleware = {
  applyMiddleware: function(options, next) {
    // Get the current context
    const context = options.getContext();
    // set it on the `options` which will be passed to the websocket with Apollo 
    // Server it becomes: `ApolloServer({contetx: ({payload}) => (returns options)
    options.authorization = context.authorization;
    next()
  },
};

const server = new ApolloServer({
  context: ({connection, payload, req}) => {
    // whatever you return here can be accessed from the middleware of the SubscriptionMiddleware with
    // applyMiddleware: (options, next) => options.getContext()
    return {authorization: payload.authorization};
  },
});

const link = new WebSocketLink({
    uri: WS_URL,
    webSocketImpl: WebSocket,
    options: {
        reconnect: true,
    }
});

link.subscriptionClient.use([subscriptionMiddleware]);

내가 찾은 유일한 해결책은 클라이언트를 수동으로 닫는 것입니다 ...

나는 1.5년 전에 해결책을 게시했습니다: apollographql/apollo-server#1505. AFAIK 이것은 여전히 ​​작동합니다.

@clayne11 귀하의 솔루션은 미들웨어를 사용하는 것을 의미합니다. 훌륭하다고 생각하지만 Angular 및 Yoga-Graphql로 작업하고 알 수 없는 이유로 컨텍스트를 통해 토큰을 보낼 수 없습니다.

서버의 미들웨어에 있는 토큰에 접근할 수 있는 방법이 있나요?
나는 Yoga를 사용하고 있으며 이것이 컨텍스트에서 토큰에 액세스하는 방법입니다.

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  middlewares: [permissions],
  resolvers,
  context: ({  connection, ...request }) => {
    if(connection) {
          wsToken: connection.context.authToken
      }
    }
    return ({...request, prisma });
  }
});


const options = {
  port: process.env.PORT || 4000,
  tracing: true,
  subscriptions: {
    path: "/",
    onConnect: async (connectionParams, webSocket) => {
     if (connectionParams.authToken) {
     // I can access this through context
       return {
         authToken: connectionParams.authToken
       };
     }
    }
  }
};


server.express.use(async (req, res, next) => {
  /*
     I want to access authToken here
  */
  next();
});


server.start(options, ({port}) => {
  console.log(`Server is runnning on http://localhost:${port}`);
});

소켓을 닫지 않고 여러 가지 폴로 네트워크 오류가 발생합니다 reconnect: true 재연결을 보장합니다... 소켓이 한 번만 닫혀도 무한 루프에서 재연결된다는 점만 제외하면 😔

편집: $ SubscriptionClient.close() SubscriptionClient.client.close() 를 호출하여 수정했습니다. .... 🤔

5개와 23개의 좋아요가 있는 100개의 흩어져 있는 세미 솔루션 대신 새 토큰으로 다시 연결하는 완전한 클라이언트 및 서버 예제가 있습니까?

apolloServer.installSubscriptionHandlers(server); 와 같은 구독을 설치합니다.
그리고 ApolloServer를 생성합니다.
const apolloServer = new ApolloServer({ schema, introspection: true, subscriptions: { onConnect: (connectionParams, webSocket, context) => { }, onDisconnect: (webSocket, context) => {}, ...there is no OnOperation: () => {}!!! },

onOperation을 추가하는 다른 방법이 있습니까? 아니면 수동으로 SubscriptionServer를 생성하고 apolloServer.installSubscriptionHandlers(server) 를 사용하지 않아야 합니까?

결국 클라이언트를 동적으로 생성했습니다. 사용자가 로그인하지 않은 경우 클라이언트는 new WebSocket 링크를 생성하지 않고 그렇지 않으면 생성합니다. 아래의 generateApolloClient 함수는 SubscriptionClient 도 노출하므로 연결되었을 때 디스패치 호출을 추가할 수 있습니다(예: redux store에 websocket이 연결되었음을 알립니다).

/**
 * Http link
 */
const httpLink = new HttpLink({
  uri: '/graphql'
});

/**
 * Perform actions before each http request
 */
const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      authorization: localStorage.getItem('token')
    }
  });
  return forward(operation);
});

const cache = new InMemoryCache();

type ApolloSubscriptionClient<TLoggedIn extends boolean> = TLoggedIn extends true ? SubscriptionClient : undefined;

/**
 * Function to create our apollo client. After login we want to add subscriptions
 * with websocket, so we'll need to recreate the entire client depending on the
 * user being logged in or logged out.
 */
export const generateApolloClient = <TLoggedIn extends boolean>(
  loggedIn: TLoggedIn
): [ApolloClient<NormalizedCacheObject>, ApolloSubscriptionClient<TLoggedIn>] => {
  let link = middlewareLink.concat(httpLink);

  // Only apply our subscription client when the user is logged in
  let subscriptionClient: SubscriptionClient | undefined;
  if (loggedIn) {
    subscriptionClient = new SubscriptionClient('ws://localhost:4001/graphql/ws', {
      reconnect: true,
      connectionParams: () => ({ authorization: localStorage.getItem('token') })
    });

    const wsLink = new WebSocketLink(subscriptionClient);

    link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      wsLink,
      link
    );
  }

  const apolloClient = new ApolloClient({ link, cache });

  return [apolloClient, subscriptionClient as ApolloSubscriptionClient<TLoggedIn>];
};

generateApolloClient ApolloProvider 구성 요소의 코드는 다음과 같습니다.

const GraphqlProvider: React.FC = ({ children }) => {
  const dispatch = useAppDispatch();
  const loggedIn = useUserLoggedIn();
  const [client, setClient] = useState(generateApolloClient(false)[0]);

  useEffect(() => {
    if (loggedIn) {
      const [apolloClient, subscriptionClient] = generateApolloClient(loggedIn);
      subscriptionClient.onConnected(() => {
        dispatch(setSubscriptionConnected(true));
      })
      setClient(apolloClient);
    }
  }, [dispatch, loggedIn]);

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

이것은 잘 작동하고 사용자가 로그아웃했다가 다시 로그인할 때마다 서버에 새 토큰이 표시되지만 약간의 추가 작업처럼 보입니다. 생각?

@dorsett85 답변 기반 React/NextJS 앱용 클라이언트를 새로 고치려면 반응 컨텍스트 API를 사용하는 것이 좋습니다.

----------- 컨텍스트 API

export const ApolloClientContext = createContext(undefined);
export const ApolloClientContextProvider: React.FC<{}> = ({ children }) => {
  const [apolloClient, setApolloClient] = useState(client);

  return (
    <ApolloClientContext.Provider value={[apolloClient, setApolloClient]}>{children}</ApolloClientContext.Provider>
  );
};

------ 아폴로 공급자

   <ApolloClientContextProvider>
      <ApolloClientContext.Consumer>
        {([apolloClient, setApolloClient]) => {
          return (
            <ApolloProvider client={apolloClient}>
              <Component {...pageProps} />
            </ApolloProvider>
          );
        }}
      </ApolloClientContext.Consumer>
    </ApolloClientContextProvider>

-------- 인증으로 새 클라이언트를 생성하는 유틸리티 함수

export const generateApolloClientWithAuth = (token): ApolloClient<any> => {
 const httpLink = createHttpLink({
  uri: 'http://localhost:5000/graphql',
  fetch,
  credentials: 'include'
});
  const wsLink = process.browser
    ? new WebSocketLink({
        uri: `ws://localhost:5000/graphql`,
        options: {
          reconnect: true,
          connectionParams() {
            console.log('-token', token);
            return {
              authorization: token ? `Bearer ${token}` : ''
            };
          }
        }
      })
    : null;
  const splitLink = process.browser
    ? split(
        ({ query }) => {
          const definition = getMainDefinition(query);
          return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
        },
        wsLink,
        httpLink
      )
    : httpLink;
  return new ApolloClient({
    ssrMode: true,
    link: splitLink,
    connectToDevTools: process.env.NODE_ENV === 'development',
    cache: new InMemoryCache().restore({})
  });
};

---------- 로그인 구성 요소

const [apolloClient, setApolloClient] = useContext(ApolloClientContext);

----------- 로그인 시
setApolloClient(generateApolloClientWithAuth(token));

중요 참고 사항: 제공된 Apollo 클라이언트 코드는 SSR을 사용합니다.

@kamilkisiela wsLink.subscriptionClient 회원을 공개 회원으로 만들 수 있나요? 바꿔야 할 것 같지는 않죠?

get 를 사용하여 마지막 값을 가져옵니다.

const wsLink = new WebSocketLink({
  uri: CLIENT_CONFIG.websocketUrl,
  options: {
    lazy: true,
    reconnect: true,
    connectionParams: {
      get authorization() {
        return user.getAuthorization();
      },
    },
    connectionCallback: (error) => {
      //@ts-ignore
      if (error?.message === "Authentication Failure!") {
        //@ts-ignore
        //wsLink.subscriptionClient.close(false, false);
      }
    },
  },
});

내가 이것이 효과가 있다고 말하면 아무도 나를 믿겠습니까?

const wsLink = process.browser
    ? new WebSocketLink({
        uri: webSocketUri,
        options: {
          reconnect: true,
          connectionParams: () => ({
            token: cookie.get('token'),
          }),
        },
      })
    : null;

즉
변경:

connectionParams: {
            token: cookie.get('token'),
},

에게:

connectionParams: () => ({
            token: cookie.get('token'),
}),