0

I am trying to implement a subscription on a paginated fragment, that contains edges, with a specified connection inside of the relay store (using the updater variable provided in useSubscription). The paginated query fragment itself is working as expected and I have verified that my schema is returning the correct data/dataType from the subscription that matches the dataType held in the connection. Relays documentation is a bit confusing when it comes to advance pagination and subscriptions so any help would be greatly appreciated!

const paginatedQuery = graphql`
  fragment ImageViewerBuildFragment on Query
  @argumentDefinitions(
    after: { type: "String" }
    first: { type: "Int", defaultValue: 20 }
    before: { type: "String" }
    last: { type: "Int" }
    GetFilesInput: { type: "GetFilesInput!" }
  )
  @refetchable(queryName: "ImageViewerPaginationQuery") {
    files(input: $GetFilesInput, after: $after, first: $first, before: $before, last: $last)
      @connection(key: "ImageViewer_files") {
      __id
      edges {
        cursor
        node {
          contentLength
          contentType
          createdBy
          displayName
          keyName
          keyValue
          fileGuid
          notes {
            note
          }
          tags {
            tag
          }
          thumbnailBase64
        }
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
        startCursor
      }
      totalCount
    }
  }
`;

const imageSubscriptionFragment = graphql`
  fragment ImageViewerBuildFragment_Subscription on Subscription {
    monitorFiles(input: $MonitorFilesInput) {
      files {
        edges {
          cursor
          node {
            contentLength
            contentType
            createdBy
            displayName
            keyName
            keyValue
            fileGuid
            notes {
              note
            }
            tags {
              tag
            }
            thumbnailBase64
          }
        }
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
        totalCount
      }
    }
  }
`;

const imageSubscription = graphql`
  subscription ImageViewerBuildSubscription($MonitorFilesInput: MonitorFilesInput!) {
    ...ImageViewerBuildFragment_Subscription
  }
`;

 function updater(store: RecordSourceSelectorProxy) {
    // console.log('store', store);
    // connectionID is passed as input to the mutation/subscription
    const connection = store.get(data.files.__id);
    // console.log(connection);
    // ...
  }

  const subscriptionConfig = useMemo(
    () => ({
      subscription: imageSubscription,
      variables: {
        MonitorFilesInput: {
          keyName: 'CaseFileId',
          keyValue: `${caseFileId}`,
        },
      },
      updater,
    }),
    [caseFileId, imageSubscription]
  );

  useSubscription<any>(subscriptionConfig);

*** Also note that (data.files.__id) is the connection id returned from the original pagination query fragment. I have tried using the connection handler to get the connection id with no joy, but because I have access to the data from the original pagination query, I can use the connection id returned there. Still unsure of what I am doing wrong.

0 Answers0