Should I expect to see a single query when I enter a route, or possibly multiple?

[ryancole]

I've just started to actually investigate and look into the efficiency of my GraphQL code and Relay queries. I am implementing DataLoader but noticed that some of my database query functions were being executed multiple times despite being DataLoader batch functions (I only expect to see them executed once). So I tabbed over to Chrome and can see that the React dev tools shows that Relay is making 3 separate queries for this single react router route. These 3 queries explains my DataLoader issue, but leads me to a new question: I thought a single route would be condensed into a single Relay query, is that true?

I'm using react router relay and react router dynamic routes. I'd post my route tree, but since I'm not using JSX routes that's not very simple to share my routes.

It's my understanding that react router relay takes care of building the graphql query for a particular route's component tree. If I hit a single route, should I expect to see 1 relay query? I'm currently seeing 3.

[ryancole]

Actually, I'd like to clarify this because I'm not sure what React dev tools means here. It shows this ...

It says Request 1, but 3 Queries. The Chrome network tab shows 3 seperate requests, so I'm not sure why React dev tools says Request 1, but 3 queries.

[taion]

It's the responsibility of the network layer to translate queries into network requests. The default network layer emits each query as a separate HTTP request, but that's the baseline behavior of the default one.

For a real application, you should definitely use a network layer and a corresponding server that support batching multiple queries into a single HTTP request. For example, I'm currently using graphql/express-graphql#100 (on npm as @taion/express-graphql) and https://github.com/taion/relay-network-layer (taion/relay@daa46a8 pulled out as a separate package, on npm as @taion/relay-network-layer) – these support batched GraphQL queries executed with the same context value, to get optimal caching with DataLoader.

I believe the most popular open-source batching network layer is @nodkz's https://github.com/nodkz/react-relay-network-layer – consider using that if you don't need the context-related semantics that I have.

[taion]

But also, no, RRR takes your queries and combines them into a single query config/Relay route. It doesn't otherwise touch your queries themselves.

[ryancole]

Thanks for the info!

[nodkz]

Issue #9 about how to use DataLoader with https://github.com/nodkz/react-relay-network-layer

Example of how you can use a single DataLoader for all (batched) queries within a one HTTP-request in RRNL https://github.com/nodkz/react-relay-network-layer/blob/master/examples/dataLoaderPerBatchRequest.js