How to solve array warnings?

[frankcalise]

I have a query and fragment like this:

export const TrackLyricsFragment = graphql(`
  fragment TrackLyrics on Track {
    id
    __typename
    hasLyrics
    lyrics {
      lines {                             // <-------- this line here has a warning (see screenshot)
        text
        startTimeMillis
        endTimeMillis
      }
    }
  }
`)

const TrackLyricsPageQuery = graphql(
  `
    query TrackLyricsPage($trackId: String!) {
      track(id: $trackId) {
        id
        ...TrackLyrics
      }
    }
  `,
  [TrackLyricsFragment],
)

The lines collection along with the text, start and end times are used somewhere later in the component, for example:

const trackData = readFragment(TrackLyricsFragment, data?.track)

const lineItems: LyricsLine[] = React.useMemo(
  () => trackData?.lyrics?.lines?.filter(notEmpty) ?? [],
  [trackData],
)

React.useEffect(() => {
    const nextIndex = lineItems.findIndex(
      (line: LyricsLine) =>
        currentMillis >= (line.startTimeMillis ?? 0) && currentMillis < (line.endTimeMillis ?? 0),
    )
   // ...
})

// text obviously rendered below in JSX

But I receive the following warning:

The only way I can get the text property removed from this tooltip is:

const lines = trackData?.lyrics?.lines
console.log(lines?.[0]?.text)

Then I'm just left with startTimeMillis and endTimeMillis - just an example as I can't use it in this manner. Any advice here?

[frankcalise]

I believe these is related now that I started finding more info on trackFieldUsage (I didn't understand the name of the feature prior to posting): #315 and #419

However my question still stands because those are asking about Remix and Tanstack Table - my use case is pretty plain in React Native, not passing them into any other library. It feels less complex than those use cases, but maybe I'm misunderstanding.

I tried removing the React.memo call around lineItems but it made no difference.

[JoviDeCroock]

FindIndex is missing from https://github.com/0no-co/GraphQLSP/blob/main/packages/graphqlsp/src/fieldUsage.ts#L111 which is most likely the cause

[frankcalise]

Ohh ok cool - can I help make that contribution? Or is it not included for a specific reason?

[JoviDeCroock]

Feel free to make a PR! I'd advise you to test it out locally first whether that's the origin of the issue as the .filter call might lose the type-identity if notEmpty is implemented in a certain way but better to test that out .

[frankcalise]

Will do, thanks. notEmpty is just a value !== null && value !== undefined, pretty straight forward

[JoviDeCroock]

Depends on the identity of the type that is returned, but I reckon if you still have typings in the second findIndex loop that you are doing that correctly.