score:0
i think i've encountered this issue, and i think i solved it as you suggest, by including the fields that needs to aliased up in the query:
graphql`
fragment forminstancefields on forminstance {
id
form {
id
name
}
status
createdat
submittedat
}
`
export default withdata<pages_dashboard_query>(indexpage, {
query: graphql`
query pages_dashboard_query {
drafts: forminstances(status: draft) {
...forminstancefields
}
submitted: forminstances(status: submitted) {
...forminstancefields
}
}
`,
})
(above fragment needs to be named correctly per compiler requirements)
then the thing to do is to not wrap forminstancelist
in a fragment container, because as you point out, this leads to errors. the impulse to wrap it is strong, because using the hoc-based api, the instinct is to wrap all the way down through the render tree. but that won't work in this case.
instead, wrap each forminstance
in a fragment container (which i'm guessing you're doing already already). then it will work. the drafts
and submitted
fields will contain arrays of relay store refs, and you can interate over them and pass each one to forminstancecontainer
.
this may feel wrong, but if you think of it from the perspective of the upcoming hooks api, or relay-hooks, there's nothing really wrong it.
edit
haven't used relay in a while, but i think you could even keep the containers at all levels by doing something like this:
graphql`
fragment forminstancelistcontainer_data on rootquery {
drafts: forminstances(status: draft) {
...forminstancefields
}
submitted: forminstances(status: submitted) {
...forminstancefields
}
}
`
shouldn't that work, too?
Source: stackoverflow.com
Related Query
- How can I have multiple sibling instances of the same top level fragment container?
- How can I use a React component on multiple instances on the same page?
- How can i target specific button's styling with onClick function if i have the same onClick function attached to multiple buttons?
- How can we use the same state across multiple tabs (pages)?
- ReactJS: How to have multiple SPA's on the same website
- How can I have two headers columns for the same column in a material UI table?
- How can I affect the state of just one individual component(card) when i have multiple versions of that component?
- How can I manage multiple setState calls in the same React component?
- How to pass a specific prop when the props can have multiple types in React, Typescript?
- How can I make a config file to import the same modules for multiple jest tests?
- How can I use the same React app in multiple locations of the same page?
- How can I apply the same styled components pattern to multiple svg components which already exist?
- React: same component reappearing multiple times in the app, how can I make sure that all states are captured accurately and not just the last?
- How can I select, with css, a nested div that is on the same level with other divs?
- How to call multiple instances of the same child component's function from parent
- How can I have a root level AppSync/Apollo client when the user isn't necessarily authenticated?
- How can I create multiple instances of a React component (having an infinite animation) with different values for the :root variables
- How can I asynchronously update multiple objects in the same array in React?
- Webpack can do multiple entries, how can I do the same thing for resolve.alias?
- How can I 'not allow' the user to retrieve same information from the server multiple times in my 'React' Weather-app?
- How do I prevent Chartjs tooltip callback returning multiple instances of the same value?
- How to embed the same redux-form multiple times on a page?
- How does webpack handle multiple files importing the same module React
- How to change multiple properties of a state in react (at the same time)?
- How to fire multiple API calls asynchronously at the same time?
- How to call multiple functions on the same onClick event ReactJS
- How can I map over two arrays at the same time?
- How do you create multiple forms on the same page with redux-forms v6?
- How to reuse the same style rule with multiple selectors
- How is the correct way to have multiple dataProviders in react-admin?
More Query from same tag
- How can the state in react-js turns back to their original value
- event bus in React?
- Create an event on key press
- Drawer needs to be showed / hidden by children, to Redux or not to Redux?
- react-router-redux pass history to middleware
- React prop-type validation with currying functions
- Formik and Yup : TypeError: Cannot read property 'object' of undefined
- How to display a JSON with different keys in React?
- POST request in react hook form not fetching the user input
- How can I unset an active class on each child component while setting it to active for the clicked child
- How to add custom arrow buttons to Alice-Carousel?
- Can't use substr on a React string
- React : how to get input value from one component to make the ajax call in another component?
- Why is ref value incrementing twice
- Converting class component with state to functional component with hooks
- React form validation with react-hook-form and multiple form components
- is a good approach defining 2 useEffect Hooks, see my use of case bellow
- How to align a li tag vertically
- What is throwing this error when building webpack application?
- Redux: Why is avoiding mutations such a fundamental part of using it?
- Failed prop type: The prop `actions` is marked as required in `Testing`, but its value is `undefined`
- css different style to specific div created by map
- Proper way to include lists and other external data inside a TypeScript React App
- how to send only date in api with material-ui-pickers
- Using redux and got Parsing error: Unexpected token
- How can I add an option to enter a digital hand signature to my form?
- How to work with API that requires a callback function as query parameter
- How to update my UseEffect component to render new UI after a successful user login
- Webpack extreme slow build
- How to add new input row to table on click?