ReasonApollo nested -> strange behaviour

reasonreact
#1

I just encountered a strange behaviour with my reasonreact + reasonapollo application.

<MainComponent>
  /* getSomeData Query returns 
     { foo: "test, bar: "test2", items: [1,2,3,4,5,6] }  */
  <FirstQueryComponent />
  <Content>
     /* getSampleData Query returns { items: [1,2,3,4] } */
     <SecondQueryComponent />
  </Content>
</MainComponent>

Both components render the same data items, they just use different queries to get some filtered data.

Lets say, <SecondQueryComponent /> is rendered on some condition.

Now the App renders and everything is fine, that means:

  • <FirstQueryComponent /> renders with all 6 items

Now the <MainComponent /> updates its state ( user clicked a button for example), and the condition changes to true.
Since <FirstQueryComponent /> is a Child, it rerenders.
BUT it rerenders with the filtered data from <SecondQueryComponent /> so the data now looks like this:
{ foo: "test, bar: "test2", items: [1,2,3,4] } (items has now the same array as the data from SecondQueryComponent).

They both use different CreateQuery Modules. There is also no new graphql request, FirstQueryComponent just gets a new result and suddenly the nested items are the same as from SeconQueryComponent.

Are the key: value pairs somehow connected because of the same “key”?

I dont know how to explain it better :smiley: Its really strange and i have no clue how this happens. Maybe someone here encountered the same and knows where my error is. I clearly did something wrong, but i dont know what it is.

#2

Update
The problem was with graphql types.
Since the items Arrays (for second and first component) are both of the (Graphql) Type ItemsList, they somehow update together when a new graphql response - with that type (event if nested) - comes in.

My workaround is now to use 2 different Types (which should not be needed cause they are the same…) ItemsFirstList and ItemsSecondLis for example. Now the lists do not interfere with eachother.

I think this is more like a general graphql “problem” (error on my side).
So sorry that it does not actually belong here.

Though its still interesting why this happens. If there are any GraphQL / Apollo experts out there, i would love to learn more about why this happens (what i did wrong).
(Feel free to send me a Message, it would be much appreciated :slight_smile:)