0

ここに画像の説明を入力

Prisma ( http://prismagraphql.com/ ) でGraphQL サブスクリプションを使用し、react + react-apollo を使用しています。

上記の例では、番号「3」は によってリッスンされていませんsubscribeToMore(。したがって、クエリchatsQueryConnectionは更新されていません。

ページが更新された後にこの番号が表示されるため、番号「3」は正常に作成されました。

subscribeToMoreリスナー:

  componentDidMount() {
    this.props.chatsQueryConnection.subscribeToMore({
      document: CHAT_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        console.log('componentDidMountSub')
        if (!subscriptionData) {
          return prev
        }
        return Object.assign({}, prev, {
          chatsConnection: {
            __typename: 'ChatConnection',
            edges: [
              ...prev.chatsConnection.edges,
              subscriptionData.data.chat
            ]
          }
        })
      }
    })
  }

GrqphQL サブスクリプション クエリ:

const CHAT_SUBSCRIPTION = gql `
  subscription {
    chat(where:{mutation_in: CREATED}) {
      node {
        id
        message
        author {
          name
          nameFile
        }
      }
    }
  }
`

完全なコードはこちら

Apollo サブスクリプション ドキュメント

Prisma サブスクリプション ドキュメント

4

0 に答える 0