Hi Shinebayar
Thanks for trying out Elastic APM and great to see that you got everything up and running 
UI
Before explaining how to see all the data, let me first explain what we're showing in the 2nd screenshot you posted.
The transaction waterfall you see at the bottom of the page is just a sample from the selected "Transactions duration distribution" bucket and in the current time-range. You can see exactly when this sample was recorded from the "Timestamp" field. When you select a different bucket using the "Transactions duration distribution" graph just above the waterfall, a new sample from that bucket will be shown.
It's useful to look at some of the buckets in the right hand side of the graph as those will be the requests that took the longest to serve. Those are usually the ones you're interested in.
Query for all data
However, if you would like to see all transactions for this endpoint, you need to go to the Discover tab in Kibana and perform a custom query. Here's an example query using the new Kibana Query language:
processor.event: "transaction" AND transaction.name: "POST /graphql"
This query will return all transactions in the current time frame with the name POST /graphql. You can customize the query to only return fields you're interested in or filter the results even further.
Special handling of GraphQL requests
As you also mention, I think the root of the problem is that all your transactions are named simply POST /graphql. This isn't really that useful, as it will group all GraphQL queries into one single transaction group. Preferably you'd like distinct groups per query type, so you can explore them individually.
Therefore, the Node.js agent will try to detect if your application is exposing a GraphQL endpoint and name the transactions according to the GraphQL query. E.g. if it sees a query named hello, it will name the transaction hello (/graphql) (we add the HTTP path in there as well just in case you're exposing multiple GraphQl endpoints in the same application).
This however only works if you use either express-graphql or apollo-server-express to respond to GraphQL requests, which is two of the most popular modules for this purpose.
If you use another module, I'd be happy to see if we can add support for it. But in the meantime (or if use a homemade solution), you can manually override the transaction name to a name that makes more sense to you using the apm.setTransactionName() method on the agent.
I hope this answers your questions both about the UI in general and about how to better instrument GraphQL queries - if not let me know. Also, please let me know what, if any, module you're using today to respond to GraphQL requests.
/thomas