Relay Modern Example (#1757)

[petrvlcek]

@timneutkens Re-created PR to be merged to master branch this time.

[timneutkens]

Thanks!

[steida]

@petrvlcek It doesn't work. Probably wrong path somewhere. Can you fix it please? Also, I don't understand why you chose unfetch, it seems to by only browser polyfil.

[petrvlcek]

@steida I forgot to add npm run schema step before npm run relay step into README instructions. I'll create a new pull request with suggested fixes tomorrow.

[steida]

And Unfetch does work for Node.js? Anyway, what is the compelling reason to not use isomorphic fetch?

[petrvlcek]

It works for Node.js. I've been using it elsewhere and didn't think about it. I have no problem changing that to isomorphic-fetch though, since it has better documentation. PR (#2776) will fix that.

Is the example working after downloading schema introspection data with npm run schema? To simplify it , I'll ditch the schema script and change it to graphql-cli.

[timneutkens]

@steida isomorphic-unfetch does work on the server. Uses node-fetch under the hood, same as isomorphic-fetch 👌

[ghost]

I'm trying to inject a postId variable into a fragmentContainer. That variable does not pass at all, even when applying all kind of solutions found on stackoverflow (these don't use nextjs, and use a router, which may be the difference with my project).

I've started the project with the with-relay-modern example.

The variable $postId doesn't inject properly, so I used defaultValue: "UG9zdDoy" which works in the meantime, but the goal is to get the value of postId from props.

Any idea how to achieve this? Is this related to how SSR works?

Deleting **defaultValue: "UG9zdDoy" ** and re-compiling gives the following error:
RelayCompilerScope: No value found for required argument $postId: String!

The page - singlePost.js

import React, { Component } from 'react'
import { graphql } from 'react-relay'
import withData from '_libs/withData'
import PostDetail from '_components/post_page/PostDetail'
import App from '_components/App'

class PostsPage extends Component {
    static displayName = `PostsPage`
    static getInitialProps ({ query }) {
    return { query }
    }

    render (props) {
    const { viewer } = this.props
    return (
            <div>
            {viewer ? <PostDetail {...this.props} 
                        postId={this.props.url.query.postId} 
                        viewer={viewer} 
                        relay={this.props.environment} /> : 'no viewer'}
            </div>
    )
    }
}

export default withData(PostsPage, {
    query: graphql`
    query singlePost_Query { 
        viewer { 
        ...PostDetail_viewer
        } 
    }`,
})

The component - postDetail.js

import React from 'react'
import PropTypes from 'prop-types'
import { createFragmentContainer, graphql } from 'react-relay'

const PostDetail = (props, {viewer}) => {
    return (
    <div>
        post
    </div>
    )
}

PostDetail.propTypes = {
    viewer: PropTypes.shape({
    post: PropTypes.shape({
        title: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired,
        image: PropTypes.string.isRequired,
        creator: PropTypes.shape({
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
        }).isRequired,
    }),
    }).isRequired,
}

// postId only works with defaultValue, but I need to get it from props.
export default createFragmentContainer(
    PostDetail,
    graphql`
    fragment PostDetail_viewer on Viewer
    @argumentDefinitions(
        postId: {type: "String!", defaultValue: "UG9zdDoy"},
    )
    {
        post (postId: $postId) {
        title
        description
        image
        creator {
            firstName
            lastName
        }
        }
    }
    `,
)

[AugustinLF]

I don't remember the exact syntax, but the way I made parameters work for a fragment was to use @arguments on the singlePost_Query side, something like:

query singlePost_Query($postId: String!) { 
        viewer { 
        ...PostDetail_viewer @arguments(postId: $postId)
        } 
    }

And then you pass your postId param to your withData. If this doesn't work for you, I'll try to find you a more complete example, but my code is slightly more complicated than that.

[ghost]

@AugustinLF many thanks for your answer.
withData could indeed be the problem, how should I pass the postId to withData?

[ghost]

Ok got it, just in case someone needs this in the future:
As @AugustinLF said

// singlePost.js
query singlePost_Query($postId: String!) { 
    viewer { 
        ...PostDetail_viewer @arguments(postId: $postId)
    } 
}

Then in withData.js, add postId in the variables

if (options.query) {
        const variables = {
          postId: ctx.query.postId
        }
        queryProps = await fetchQuery(environment, options.query, variables)
        queryRecords = environment.getStore().getSource().toJSON()
}

[tusgavomelo]

Hi! I'm having a little trouble to get the errors of a query using this example.

The errors returned by the query are not available on the component props.

// query response
{
  data: { foo: null },
  errors: [
    { message: 'example' },
  ]
}

// component render method
render () {
  console.log(this.props.foo) // null
  console.log(this.props.errors) // undefined :(
}