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

0.4.4: Mutations overlapping queries stop SSR #141

Closed
voodooattack opened this Issue Aug 15, 2016 · 3 comments

Comments

Projects
None yet
2 participants
@voodooattack
Copy link

voodooattack commented Aug 15, 2016

Take the following query:

const withGrades = graphql(gql`
  query grades($limit: Int!, $offset: Int, $order: Object, $search: Object) {
    grades (limit: $limit, offset: $offset, order: $order, search: $search) {
      count
      items {
        id
        title
        description
        createdAt
        updatedAt
      }
    }
  }
`, {
  options(ownProps) {
    const query = queryToState(ownProps.location.query);
    return {
      variables: {
        limit: query.limit || 10,
        offset: query.offset || 0,
        order: query.sortKey ? { [query.sortKey]: (query.sortDsc === true || query.sortDsc === 'true') } : null,
        search: query.search && Object.keys(query.search).length ? query.search : null
      }
    };
  },
  props({ ownProps, data }) {
    if (data.errors) return { errors: data.errors };
    return {
      loading: data.loading,
      refetchQuery: data.refetch,
      item: null,
      items: data.loading ? [] : data.grades.items,
      queryCount: data.loading ? 0 : data.grades.count,
    };
  }
});

Here SSR works well, but the mutation has no access to the refetchQuery prop on the client.

@graphql(gql`
  mutation ($title: String!, $description: String) {
    createGrade(title: $title, description: $description) { id }
  }
`,
{
  props({ ownProps, mutate }) {
    return {
      createItem(variables) {
        return mutate({ variables })
          .then(() => ownProps.refetchQuery());
      }
    }
  }
})
@withGrades // << BELOW
export class GradesSidebar extends React.Component {
  render() {
    return <Sidebar singular="Grade" {...this.props} />
  }
}

Here the exact opposite happens: SSR doesn't work, but the client can access the props normally.

@withGrades /// << ABOVE
@graphql(gql`
  mutation ($title: String!, $description: String) {
    createGrade(title: $title, description: $description) { id }
  }
`,
{
  props({ ownProps, mutate }) {
    return {
      createItem(variables) {
        return mutate({ variables })
          .then(() => ownProps.refetchQuery());
      }
    }
  }
})
export class GradesSidebar extends React.Component {
  render() {
    return <Sidebar singular="Grade" {...this.props} />
  }
}

I traced the issue to line 221 in graphql.jsx:

      // for use with getData during SSR
      static fetchData = operation.type === DocumentType.Query ? fetchData : false;

When I turned it into an if statement everything worked:

if (operation.type === DocumentType.Query)
    GraphQL.fetchData = fetchData;

And for the life of me I have no idea why. (I'd really appreciate an explanation!)

@jbaxleyiii

This comment has been minimized.

Copy link
Member

jbaxleyiii commented Aug 15, 2016

@voodooattack thank you for the excellent example and starting to hunt down the issue! I'll take a look and see what I can figure out!

@jbaxleyiii

This comment has been minimized.

Copy link
Member

jbaxleyiii commented Aug 16, 2016

@voodooattack I have no idea why that changes fixes it, but it definitely does! I've made the change and will release it and keep poking around to figure out why!

@jbaxleyiii jbaxleyiii closed this Aug 16, 2016

@voodooattack

This comment has been minimized.

Copy link
Author

voodooattack commented Aug 16, 2016

@jbaxleyiii Excellent. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment