Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with preloaded queries which use Enum and mutations #42

Closed
papigers opened this issue Jul 2, 2016 · 3 comments
Closed

Problem with preloaded queries which use Enum and mutations #42

papigers opened this issue Jul 2, 2016 · 3 comments

Comments

@papigers
Copy link

papigers commented Jul 2, 2016

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):
capture

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:

  1. 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.
  2. 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?

@papigers
Copy link
Author

papigers commented Jul 3, 2016

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?

@papigers
Copy link
Author

papigers commented Jul 3, 2016

Just wanted to update that this is a completely relay issue, which I've addressed in this PR

@denvned
Copy link
Owner

denvned commented Sep 2, 2016

I have just updated isomorphic-relay to Relay v0.9.3 which contains a fix for this issue.

@denvned denvned closed this as completed Sep 2, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants