Comments (8)
@josephsavona unfortunately it doesn't help in following situations:
- Trully dynamic components when parent is not aware of all possible children (like Relay.RootContainer)
- Code splitting - when actual child component is loaded on demand and you don't have reference to it's container at static time
Would be great if Relay could provide some solution for these cases as well as they are fairly common.
from relay.
Great question. Relay has support for this, but it's an advanced feature and so we didn't initially document it. Note that the API is likely to change (but we'll mark it as deprecated before doing so). However, we'd appreciate your feedback on this API and any suggestions you may have.
Current API
Here's how you can construct a container whose child is dynamic based on the current route:
Relay.createContainer(App, {
fragments: {
foo: () => Relay.QL`
fragment on Node {
${Header.getFragment('foo')}
${route => switch (route.name) {
case 'RouteA': return ContainerA.getFragment('foo');
case 'RouteB': return ContainerB.getFragment('foo');
default: return null;
}}
}
`,
},
});
In addition to the standard forms of fragment composition documented here, you can also pass a value of the type
(route: {name: string} => ?Fragment;
Basically, a function that accepts an object with a name: string
property, and returns an (optional) fragment.
(Proposed) Future API
The future API we've explored for this would use GraphQL directives:
...
foo: () => Relay.QL`
${Header.getFragment(...)},
${ContainerA.getFragment(...)} @relay(route: 'RouteA'),
${ContainerB.getFragment(...)} @relay(route: 'RouteB'),
`
from relay.
This is great, thank you! I'll try it out and get back to you.
from relay.
Wait... @josephsavona
foo: () => Relay.QL`
fragment on Node {
${Header.getFragment('foo')}
${route => switch (route.name) {
case 'RouteA': return ContainerA.getFragment('foo');
case 'RouteB': return ContainerB.getFragment('foo');
default: return null;
}}
}
`,
Wouldn't this only let the composed fragments compose on Node
? If ContainerB
wanted a User
instead, he wouldn't be able to fragment on that, right?
from relay.
@devknoll With the Relay GraphQL spec most types will implement the Node
interface, so this would be okay. In your example if RouteA
matched, you'd end up with the following (valid) GraphQL:
fragment App on Node {
...Header
...ContainerB
}
fragment Header on ...
fragment ContainerA on User {...}
from relay.
Yup! Just realized that. It looks like there may actually be a bug with graphql-ruby or at least my implementation. Thanks again, and sorry for bothering 😄
from relay.
For posterity, the actual query being generated actually looks more like this:
query Dashboard {
viewer {
id,
...Header
}
}
fragment ContainerA on Viewer {
name,
id
}
fragment Header on Node
{
id,
...ContainerA
}
This looks like it should be syntactically the same as the above, but I think the first fragment on Node
caused graphql-ruby to lose the Viewer
type information, forcing it to fall back to a default-implemented resolve_type
.
from relay.
Referenced to #896
and http://stackoverflow.com/questions/35067685/getfragment-from-a-dynamic-component-in-relay
from relay.
Related Issues (20)
- [lsp] Find field references not always working HOT 2
- graphql-syntax: Parser crash parse_document_with_features (assertion failed: start <= end)
- How to create environment factory HOT 4
- optimisticUpdater has invalid signature
- optional field in array is generated as not undefined but nullable
- TS2786: 'RelayEnvironmentProvider' cannot be used as a JSX component. HOT 1
- Support for React Server Components HOT 9
- [relay-lsp] Add a refactor to turn global variable into explicit fragment argument HOT 1
- babel eagerEsModules, ESM Modules, and missing file extensions
- Async RecordSource methods mentioned in docs but don't seem to exist
- Client schema interface extension are not taken into account by the compiler
- relay-runtime 15.0.0 ConnectionHandler.getConnection() is undefined HOT 2
- Server Exception in Tutorial Newsfeed Example HOT 1
- Code examples on website are hard to read in dark mode
- eslint-plugin-relay README should say that the source of truth is this repo HOT 1
- Relay compiler fails when using custom scalars [16.2] HOT 3
- Loading data inside of hooks VS loading data outside of hooks?
- Making usePreloadedQuery throw a hard error when the environment changes will break React Router HOT 1
- Why does receiving a null node break the execution of the mutation in @appendNode?
- Errors should not be shared between queries HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from relay.