Comments (6)
I use the graphql-loader to be able to put queris in .gql
or .graphql
files. Here is an example :
fragments.gql
fragment UserParts on User {
id
name
email
}
get-by-email.gql
#import "./fragment.gql"
query ($email: String!) {
user {
getByEmail(email: $email) {
...UserParts
}
}
}
from apollo.
@Xroker , I moved away from apollo to modelizr. Sorry I didn't make that clear.
I used it to create my own vuex store, and accessed it via actions.
I couldn't get apollo to work in a way that I any benefits over a more traditional approach to the data layer
from apollo.
I came up with a system which I quickly ditched (due to performance issues of 800 records, and I think Apollo restrictions).
Essentially, it went like this:
import exampleComponent from './exampleComponnent';
const fragments = `
fragment aComponentFragment on SomeDate {
id
some_data
exampleData {
...exampleComponentFragment
}
}
${exampleComponent.fragments}
`;
const query = gql`
query SomeDate {
...aComponentFragment
}
${fragments}
`;
export default {
fragments,
name: 'aComponent',
components: { exampleComponent },
apollo: {
somedata: {
query
}
},
data() {
return {
somedata: {}
}
}
}
This pattern was repeated all the way down through components.
Basically,
Components define what data they want in their fragment. That fragment should also include whatever fragments child-components require.
The query turns it into gql, and makes sure that the component only gets what it requires (as well as data for the children).
I ran into an issue where Apollo didnt know what data to return from the store.
So a parent component might have requested & cached the data for it's children, but when the child requested it, Apollo didn't know it was already in the store, so would refetch from the server.
When I finally got it working, data processing time was about 5x what I would expect from a vanilla api layer.
I eventually went with julienvincent/modelizr
. It's not quite what I want, but its close and fast.
Without writing it myself, I don't think there is a perfect-fit solution out there. And - I have so much else to do on my project - that the close fit of modelizr is good enough to let me get on with the work.
from apollo.
I am about to start playing around with vue & vue-apollo for my current project.
I'd love to see an example of nested components utilising fragments & building up a query.
I think the way to do it would be to have each component export a graphql fragment separate to the actual component.
If a component requires a child component, it also requires the child's graphql query/fragment, and builds it into it's own query/fragment.
The app/super-parent then builds & executes the actual query, and the data is (kinda unfortunately) sent as props.
Or perhaps a component exports 2 similar definitions: a query (as a top-level component, responsible for fetching data) and a fragment (as a child component, responsible for asking for data).
The app/super-parent is responsible for building and executing the query, but each component has its own apollo query (as in a vue-apollo query, separate from the exported query and fragment) to fetch data directly from the store, little-to-no props required (as in, only the id of the object required).
I think the 2nd approach - from what I have read & understood - would be the way to do it.
there is a bit of code duplication, however - seeing as graphql is just a string - for simple-to-medium complexity problems, it would be trivial to implement, and the 'fields required' would be a matter of string concatenation.
I'm working on a time based system, where date ranges are pretty critical to what is displayed.
I want the data to be fetched & processed only for the visible date-range.
But baby steps.
from apollo.
Hi, @Akryum . Same question. React users have https://github.com/apollographql/graphql-anywhere . I'm wondering if there is a way to use something like this in Vue
Update:
I just found out that graphql-anywhere works actually anywhere :) including Vue, with the exception of the react-only features like PropTypes
from apollo.
@Towerful thank you for sharing this! Modelizr looks interesting. Can you please provide an example of a vue component using apollo with modelizr?
from apollo.
Related Issues (20)
- console log remained in code
- Unable to view V4 documentation
- useFragment HOT 2
- Setup Apollo for a Vue+SSR app HOT 14
- Not work with 3.2.25 HOT 2
- Make `provideApolloClient` default client disposable.
- Remove automatic subscription retry on error
- Can't receive messages in a chat using subscription
- skip() doesn't skip query HOT 1
- @vue/apollo-ssr doesn't work in SSR mode
- Fragments aren't returned in results when using useQuery/useLazyQuery reactive refs HOT 2
- Using vue-apollo-composable inside a Pinia setup store HOT 2
- `useApolloClient` checks wrong conditions before calling `inject()`
- useQuery blocks page load on 4.0.0 HOT 2
- useQuery with fetchPolicy: cache-only does not return expected data HOT 3
- Doesn't update the data after a mutation if `enabled` is `false` in `useQuery`
- Queries are not executed in given order
- @vue/[email protected] has a peer dependency conflict with Vue 3 HOT 4
- [docs] The installation guide is very bad HOT 1
- Refetch with New Variables Overrides Other Existing Refetches HOT 1
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 apollo.