Problem with preloaded queries which use Enum and mutations
papigers opened this issue · 3 comments
I'm not sure whether this is a problem with isomorphic-relay, isomorphic-relay-router, or just my fault, but I have very weird problem, and it would probably be hard to explain.
I'll start with some information on my application:
I have 2 routes, say A and B, which queries a list of polls which can be sorted according to the input Enum: which accepts either TOP, TRENDING or NEW.
I also implemented a mutation which creates a poll, which can be accessed on a different route - C.
let's say I open my browser and open my app, it starts with route A, my index Route. The servers loads the polls fine, and the data is injected on the client. cool!
now I go to route C and try to create a poll, I click submit and I see this (console.log the transaction on the mutation's onFailure cb):
and on Network this:
{"errors":[{"message":"Argument \"orderBy\" has invalid value \"TRENDING\".\nExpected type \"PollSort\", found \"TRENDING\".","locations":[{"line":32,"column":29}]}]}
I've looked on the query and this is what my application sent: (the relevant part is on fragment F1)
mutation CreatePollMutation($input_0:CreatePollInput!) {
createPoll(input:$input_0) {
clientMutationId,
...F7,
...F9,
...Fa
}
}
fragment F0 on Poll {
id,
title,
options,
_voteslie3m:votes(first:10) {
edges {
node {
option,
id
},
cursor
},
pageInfo {
hasNextPage,
hasPreviousPage
}
},
author {
id,
username
}
}
fragment F1 on Store {
_pollsGboKo:polls(orderBy:"TRENDING",first:4) { //should be just TRENDING without " "
edges {
node {
id,
...F0
},
cursor
},
pageInfo {
hasNextPage,
hasPreviousPage
}
},
id
}
fragment F2 on Store {
id,
pollCount
}
fragment F3 on Store {
id,
...F2
}
fragment F4 on User { id }
fragment F5 on User { id, pollCount }
fragment F6 on User { id, ...F5 }
fragment F7 on CreatePollPayload {
store { id, ...F1, id, ...F3 },
viewer { id, ...F4, id, id, id, ...F6 }
}
fragment F8 on Store { id }
fragment F9 on CreatePollPayload {
pollEdge {
cursor,
__typename,
node {
id,
title,
options,
_voteslie3m:votes(first:10) {
edges {
node {
option,
id
},
cursor
},
pageInfo {
hasNextPage,
hasPreviousPage
}
},
author {id, username }
}
},
store { id, ...F8, id, ...F3 }
}
fragment Fa on CreatePollPayload {
pollEdge {
cursor,
node { id }
}
}
take note that F1 is a fragment which route A component's container requires. Somehow it passes as a string when I create a mutation.
2 things important to know:
- If I open the browser directly to route C or any route which isn't A and B (that uses this Enum), and then go to C and try to create a poll - everything works! this is why I doubt the problem is with me.
- If I break the "isomorphication" of my app by changing
// data is JSON.parse(...preloadedData...);
IsomorphicRelay.injectPreparedData(environment, data);
to:
IsomorphicRelay.injectPreparedData(environment, []);
The problem disappears.
Any ideas? Is it something I'm doing wrong?
UPDATE:
I console.logged the prepared data the server injected to the client, this is what I found:
(searched my orderBy enum variable)
...
...
{
"children": [
{
"calls": [
{
"kind": "Call",
"name": "orderBy",
"metadata": {
"type": null
},
"value": {
"kind": "CallValue",
"callValue": "TRENDING"
}
},
{
"kind": "Call",
"name": "first",
...
...
I've noticed that the metadata.type of the orderBy variable was null, so I tried to hack it a bit and see if that is indeed the problem.
on the client I did this:
data[1].query.children[1].children[0].calls[0].metadata.type = 'PollSort';
Obviously this is not a real solution, but I tried to see if that was the problem, and it was. The problem didn't occur when I tried to create the poll later.
So I'm guessing the problem is with prepareData on either isomorphic-relay-router or isomorphic-relay. Any idea how to fix this?