如何实现graphql到Relay.QL的转换？无需依赖createFragmentContainer

Absolutely, you can build a custom solution to map the output of your new GraphQL Babel transform (with query name lookup) to Relay.QL—no need for createFragmentContainer if you don’t want it. Let’s walk through this step by step:

1. First, Map the Output Differences #

Before writing a converter, you need to clearly understand how the two outputs differ. Grab a simple fragment/query and compile both with their respective tools in a Babel REPL to compare:

• Relay.QL Compiled Output: It generates a special object wrapped by Relay’s internal createQL utility, with properties like kind, ast (the GraphQL abstract syntax tree), and metadata (including the fragment/query name that Relay’s runtime uses to resolve data). Example output might look like:

  Relay.createQL(
    {
      kind: 'Fragment',
      ast: /* Parsed GraphQL AST */,
      metadata: { fragmentName: 'MyComponent_fragment' }
    },
    'fragment MyComponent_fragment on User { id name }'
  )
  

• New GraphQL Transform Output: Based on your description, this likely returns an object with explicit fields for the query name, raw AST, and fragment dependencies—something like:

  {
    query: /* Parsed GraphQL AST */,
    name: 'MyComponent_fragment',
    type: 'Fragment',
    fragments: []
  }
  

Your converter’s job is to translate this second structure into the first, Relay-compatible format.

2. Build a Custom Babel Plugin Converter #

Since both tools work at the Babel level, the cleanest approach is to write a small Babel plugin that runs after your new GraphQL transform. Here’s a high-level outline:

• Intercept Transform Output: Target the AST nodes where your new graphql function is called (look for CallExpression nodes with callee name graphql).
• Extract Key Data: Pull the query name, AST, and type (Fragment/Query) from the transform’s output.
• Generate Relay.QL-Compatible Code: Construct a new AST that mimics what Relay.QL produces. For example, replace the graphql(...) call with a call to Relay.createQL using the extracted data.

A simplified code snippet for the plugin might look like:

module.exports = function(babel) {
  const { types: t } = babel;

  return {
    visitor: {
      CallExpression(path) {
        if (path.node.callee.name === 'graphql') {
          // Extract the query name and AST from the transform's output
          const queryName = path.node.arguments[1].properties.find(
            prop => prop.key.name === 'name'
          ).value.value;
          const astNode = path.node.arguments[0];

          // Build the Relay.QL-compatible object
          const relayQLObject = t.objectExpression([
            t.objectProperty(t.identifier('kind'), t.stringLiteral('Fragment')),
            t.objectProperty(t.identifier('ast'), astNode),
            t.objectProperty(
              t.identifier('metadata'),
              t.objectExpression([
                t.objectProperty(t.identifier('fragmentName'), t.stringLiteral(queryName))
              ])
            )
          ]);

          // Replace the graphql call with Relay.createQL
          path.replaceWith(
            t.callExpression(
              t.memberExpression(t.identifier('Relay'), t.identifier('createQL')),
              [relayQLObject, t.stringLiteral(/* Raw GraphQL string */)]
            )
          );
        }
      }
    }
  };
};

3. Use the Converted Output Without createFragmentContainer #

Once your converter is in place, you can use the transformed Relay.QL objects directly with Relay’s lower-level runtime APIs, skipping createFragmentContainer:

• For fragments, use Relay.readFragment to fetch data from a parent record:

  // After conversion, this becomes a Relay.QL-compatible object
  const myFragment = graphql`
    fragment MyComponent_fragment on User {
      id
      name
    }
  `;
  
  // In your component's render method or hook
  const userData = Relay.readFragment(myFragment, props.userRecord);
  

• For queries, you can pass the converted object to Relay.enqueueQuery or use it with Relay’s environment APIs directly.

4. Validate and Iterate #

Test your converter with different query/fragment types to ensure:

• Query names are correctly mapped to Relay’s fragmentName/queryName metadata.
• The GraphQL AST is preserved exactly (Relay relies on this for data resolution).
• Any fragment dependencies are properly included in the Relay-compatible output.

If you hit edge cases (like nested fragments or variable definitions), adjust your Babel plugin to handle those specific structures from your new transform.

内容的提问来源于stack exchange，提问作者Hemant Verma