feat: show graphql operation name for graphql requests

[yurik256]

Please verify the following:

• yarn build-and-test:local passes
• I have added tests for any new features, if relevant
• README.md (or relevant documentation) has been updated with your changes

Describe your PR

On the react native project I'm working on, we are extensively using graphql.
Current implement of timeline plugin, makes it hard to differentiate graphql requests, as they are all shown as POST /graphql in the timeline

This PR improves this by adding the following

• show operation name for graphql requests
  • This is implemented by parsing request.operationName field, which is automatically added for all graphql requests made by @apollo/client
• Ability to filter requests by request data

Screenshots

Show operation name

Ability to search by request data ( in this case, operation name )

[yurik256]

The contributing guide, unfortunately, doesn't specify who should be marked as the reviewer.
@morganick, I see that you reviewed a few recent PRs, would you mind taking a look?

[morganick]

Sorry for such a long delay in this. I had a couple of moments this morning and had the tab still open 😅 I haven't had a chance to fully test this out with a GraphQL API & Apollo Client. I'll look at doing that next week.

[frankcalise]

@yurik256 thanks for the contribution! Do you have the time to make the requested changes by Nick? If not let us know and we can try to bring it up to speed.

[yurik256]

@yurik256 thanks for the contribution! Do you have the time to make the requested changes by Nick? If not let us know and we can try to bring it up to speed.

@frankcalise thanks for following up! I somehow missed the message from @morganick :(
The suggested change to use join makes sense. Just pushed the changes.

I tried changing the order so that we show the operation name before the URL, and that makes it visually hard to parse.
It could be that I'm also just used to the fact that URL should come first 🤷‍♂️
I would like to propose that we display the operation name after the URL.
@morganick, what do you think?

operation name before:

operation name after:

[morganick]

@yurik256 I'm good with putting it after the URL. I'd love to update the design of the timeline to accommodate for things like this. It gets lost a bit either way, but I agree that after is easier on the eyes because of the uniformity of the pattern in POST /url/goes/here