订阅

1
import { createFetchMultipartSubscription } from '@apollo/client/utilities/subscriptions/relay';
2
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
3

4
const fetchMultipartSubs = createFetchMultipartSubscription('https://api.example.com');
5

6
const network = Network.create(fetchQuery, fetchMultipartSubs);
7

8
export const RelayEnvironment = new Environment({
9
  network,
10
  store: new Store(new RecordSource()),
11
});

1
import { createFetchMultipartSubscription } from '@apollo/client/utilities/subscriptions/urql';
2
import { Client, fetchExchange, subscriptionExchange } from '@urql/core';
3

4
const url = 'https://api.example.com';
5

6
const multipartSubscriptionForwarder = createFetchMultipartSubscription(url);
7

8
const client = new Client({
9
  url,
10
  exchanges: [
11
    fetchExchange,
12
    subscriptionExchange({
13
      forwardSubscription: multipartSubscriptionForwarder,
14
    }),
15
  ],
16
});

1
const COMMENTS_SUBSCRIPTION: TypedDocumentNode<
2
  OnCommentAddedSubscription,
3
  OnCommentAddedSubscriptionVariables
4
> = gql`
5
  subscription OnCommentAdded($postID: ID!) {
6
    commentAdded(postID: $postID) {
7
      id
8
      content
9
    }
10
  }
11
`;

1
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
2
import { createClient } from 'graphql-ws';
3

4
const wsLink = new GraphQLWsLink(
5
  createClient({
6
    url: 'ws://:4000/subscriptions',
7
  }),
8
);

1
import { split, HttpLink } from '@apollo/client';
2
import { getMainDefinition } from '@apollo/client/utilities';
3
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
4
import { createClient } from 'graphql-ws';
5

6
const httpLink = new HttpLink({
7
  uri: 'https://:4000/graphql',
8
});
9

10
const wsLink = new GraphQLWsLink(
11
  createClient({
12
    url: 'ws://:4000/subscriptions',
13
  }),
14
);
15

16
// The split function takes three parameters:
17
//
18
// * A function that's called for each operation to execute
19
// * The Link to use for an operation if the function returns a "truthy" value
20
// * The Link to use for an operation if the function returns a "falsy" value
21
const splitLink = split(
22
  ({ query }) => {
23
    const definition = getMainDefinition(query);
24
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
25
  },
26
  wsLink,
27
  httpLink,
28
);

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2

3
// ...code from the above example goes here...
4

5
const client = new ApolloClient({
6
  link: splitLink,
7
  cache: new InMemoryCache()
8
});

1
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
2
import { createClient } from 'graphql-ws';
3

4
const wsLink = new GraphQLWsLink(createClient({
5
  url: 'ws://:4000/subscriptions',
6
  connectionParams: {
7
    authToken: user.authToken,
8
  },
9
}));

1
const COMMENTS_SUBSCRIPTION: TypedDocumentNode<
2
  OnCommentAddedSubscription,
3
  OnCommentAddedSubscriptionVariables
4
> = gql`
5
  subscription OnCommentAdded($postID: ID!) {
6
    commentAdded(postID: $postID) {
7
      id
8
      content
9
    }
10
  }
11
`;
12

13
function LatestComment({ postID }: LatestCommentProps) {
14
  const { data, loading } = useSubscription(
15
    COMMENTS_SUBSCRIPTION,
16
    { variables: { postID } }
17
  );
18

19
  return <h4>New comment: {!loading && data.commentAdded.content}</h4>;
20
}

1
const COMMENTS_QUERY: TypedDocumentNode<
2
  CommentsForPostQuery,
3
  CommentsForPostQueryVariables
4
> = gql`
5
  query CommentsForPost($postID: ID!) {
6
    post(postID: $postID) {
7
      comments {
8
        id
9
        content
10
      }
11
    }
12
  }
13
`;
14

15
function CommentsPageWithData({ params }: CommentsPageWithDataProps) {
16
  const result = useQuery(
17
    COMMENTS_QUERY,
18
    { variables: { postID: params.postID } }
19
  );
20

21
  return <CommentsPage {...result} />;
22
}

1
const COMMENTS_SUBSCRIPTION: TypedDocumentNode<
2
  OnCommentAddedSubscription,
3
  OnCommentAddedSubscriptionVariables
4
> = gql`
5
  subscription OnCommentAdded($postID: ID!) {
6
    commentAdded(postID: $postID) {
7
      id
8
      content
9
    }
10
  }
11
`;

1
function CommentsPageWithData({ params }: CommentsPageWithDataProps) {
2
  const { subscribeToMore, ...result } = useQuery(
3
    COMMENTS_QUERY,
4
    { variables: { postID: params.postID } }
5
  );
6

7
  return (
8
    <CommentsPage
9
      {...result}
10
      subscribeToNewComments={() =>
11
        subscribeToMore({
12
          document: COMMENTS_SUBSCRIPTION,
13
          variables: { postID: params.postID },
14
          updateQuery: (prev, { subscriptionData }) => {
15
            if (!subscriptionData.data) return prev;
16
            const newFeedItem = subscriptionData.data.commentAdded;
17

18
            return Object.assign({}, prev, {
19
              post: {
20
                comments: [newFeedItem, ...prev.post.comments]
21
              }
22
            });
23
          }
24
        })
25
      }
26
    />
27
  );
28
}

1
export function CommentsPage({ subscribeToNewComments }: CommentsPageProps) {
2
  useEffect(() => subscribeToNewComments(), []);
3

4
  return <>...</>
5
}