Relay classic to relay modern migration

[adammo94]

Hey, I'm working on migrating super-duper old project made in relay which apparently has no documentation (0.9.4). Since project is made with class components, I made the decision to move to relay modern without hooks (legacy API). I saw a migration guide, but not everything is clear to me.

here's an example how it is currently working, React-router (v3) route:

<Route
  name="LogIn"
  path={LinkService.login()}
  component={Login} // 2.
  queries={ViewerQueries} // 1.
  render={renderOrLoading(Login)}
/>

ViewerQueries

const ViewerQueries = {
  viewer: () => Relay.QL`query { viewer }`,
}

Login Component

export class _Login extends React.Component {
  render() {
    return <LoginPageContent viewer={this.props.viewer} /> // 3.
  }
}

export default Relay.createContainer(_Login, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        ${LoginPageContent.getFragment('viewer')},
      }
    `,
  },
})

LoginPageContent

export default Relay.createContainer(Login, {
  initialVariables: {},

  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        user {
          id
          username
          userProfile {
            showTermsOfServiceModal
            isAmbassador
            isInternal
            isLite
            isExternal
          }
        }
        ${TermsOfServiceModal.getFragment('viewer')}
        ${AuthMutation.getFragment('viewer')},
      }
    `,
  },
})

How do I put ${SomeComponent.getFragment('someFragment') in relay modern? Currently it says it came across dollar sign and won't process.

What I've done:

• I moved everything from LoginPageContent component to Login component
• At first I tried to mimic fragment, but it wouldn't work saying that's not enclosed in QueryRenderer

  export const createFragmentContainer(_Login, {
  viewer: graphql`
     fragment Login on Viewer {
       user {
         id
         username
         userProfile {
           showTermsOfServiceModal
           isAmbassador
           isInternal
           isLite
           isExternal
         }
       }
     }
   `,
  });

• the QueryRenderer worked, but I don't know if moving from fragments to whole queries is the right way:

  const Login = () => {
  const router = useRouter();
  
  return (
  <QueryRenderer
    environment={environment}
    query={graphql`
    query LoginQuery {
      viewer {
        user {
          id
          username
          userProfile {
            showTermsOfServiceModal
            isAmbassador
            isInternal
            isLite
            isExternal
          }
        }
      }
    }
  `}
    render={({
      props,
    }) => (
      <_Login
        {...props}
        router={router}
      />
    )}
  />
  );
  };

• Mutation (before):

  export default class AuthMutation extends Relay.Mutation {
  static fragments = {
  viewer: () => Relay.QL`
    fragment on Viewer {
      id
    }
  `,
  }
  
  getMutation = () => {
  if (this.props.login) {
    return Relay.QL`mutation {logIn}`
  } else {
    return Relay.QL`mutation {logOut}`
  }
  }
  
  getVariables = () => {
  const { login, params } = this.props
    if (login) {
      return params
    }
  }
  
  getFatQuery = () => {
  if (this.props.login) {
    return Relay.QL`
      fragment on LogInMutationPayload {
        viewer
      }
   `
  } else {
    return Relay.QL`
      fragment on LogOutMutationPayload {
        viewer {
          user
        }
      }
    `
   }
  }
  
  getConfigs = () => [
  {
     type: 'FIELDS_CHANGE',
     fieldIDs: {
       viewer: this.props.viewer.id,
    },
  },
  ]
  }

• Same mutation modified to be compatible with relay-modern. Is this ok?

  export const authMutation = (environment, variables) => {
  const getMutation = () => {
  if (variables) {
    return graphql`mutation newAuthMutationLoginMutation($input: LogInMutationInput!) {
      logIn(input: $input) {
        clientMutationId
        viewer {
          user {
            email
          }
        }
      }
    }`;
  }
  
  return graphql`mutation newAuthMutationLogoutMutation($input: LogOutMutationInput!) {
    logOut(input: $input) {
      clientMutationId
      viewer {
        user {
          email
        }
      }
    }
  }`;
  };
  const getVariables = () => {
  const {
    login,
    name,
    password,
  } = variables;
  
  if (login) {
    return {
      name,
      password,
    };
  }
  
  return {};
  };
  
  const getConfigs = () => [
  {
    fieldIDs: {
      viewer: variables.viewer.id,
    },
    type: 'FIELDS_CHANGE',
  },
  ];
  
  return commitMutation(environment, {
  configs: getConfigs(),
  mutation: getMutation(),
  onCompleted: res => variables.onSuccess(res), // this is on purpose, since where those mutations are triggered they have onSucces and onError keys
  onError: tx => variables.onFailure(tx),
  variables: {
    input: getVariables(),
  },
  });
  };

[edvinerikson]

I think your best choice is to look at the old docs. Eg here: https://github.com/facebook/relay/blob/v1.5.0/docs/Modern-ConversionPlaybook.md

[adammo94]

@edvinerikson as I've said, I tried updating according to migration guide, however I do not know if changing from fragments to queries is a good way? Also I do not know how do include fragments that are inside (classic) mutations in (modern) queries/mutations

[edvinerikson]

You probably want the compat api. Eg createFragmentContainer from the compat module. These fragments can be referenced from classic and modern. Regarding mutation you can probably just query all fields that may change, this how it's done in modern. Otherwise I suppose mutation might still be able to reference compat fragments.

https://github.com/facebook/relay/blob/v1.5.0/docs/Modern-RelayCompat.md

The suggested approach in the docs is to:

1. migrate all fragments to the compat api (createFragmentContainer)
2. Switch Relay.Renderer to QueryRenderer.

Don't start at the top of the component tree, start at the bottom/leaf components instead and work yourself up to the query.

[edvinerikson]

The docs also states this which might clear things up regarding your mutation question:

* Modern API doesn't support mutation fragments. You might have to inline the mutation fragments from your legacy mutation in the fragment of the component.

[edvinerikson]

You can run the codemod for the fragments: https://github.com/facebookarchive/relay-codemod/blob/master/transforms/migrate-to-modern-1.0.js