vue-apollo | Apollo/GraphQL integration for VueJS | GraphQL library
kandi X-RAY | vue-apollo Summary
kandi X-RAY | vue-apollo Summary
Apollo/GraphQL integration for VueJS
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vue-apollo
vue-apollo Key Features
vue-apollo Examples and Code Snippets
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
import { render } from '@testing-library/vue'
import fetch from 'cross-fetch'
import { provideApolloClient } from '@vue/apollo-composable'
const apolloClient = new Apo
import { Context } from '@nuxt/types'
import {
onGlobalSetup,
defineNuxtPlugin
} from '@nuxtjs/composition-api'
// @ts-ignore
import { provideApolloClient } from '@vue/apollo-composable'
/**
* This plugin will connect @nuxt/apollojs
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'
export default {
setup () {
const { result, loading, error, refetch } = useQuery()
const users = useResult(result)
return {
u
Community Discussions
Trending Discussions on vue-apollo
QUESTION
I was wondering if an object type that has an id property has to have the same content given the same id. At the moment the same id can have different content.
The following query:
...ANSWER
Answered 2022-Feb-22 at 21:24No it does not break the spec. The spec forces absolutely nothing in regards caching.
Literature for people that may be interestedFrom the end of the overview section
Because of these principles [... one] can quickly become productive without reading extensive documentation and with little or no formal training. To enable that experience, there must be those that build those servers and tools.
The following formal specification serves as a reference for those builders. It describes the language and its grammar, the type system and the introspection system used to query it, and the execution and validation engines with the algorithms to power them. The goal of this specification is to provide a foundation and framework for an ecosystem of GraphQL tools, client libraries, and server implementations -- spanning both organizations and platforms -- that has yet to be built. We look forward to working with the community in order to do that.
As we just saw the spec says nothing about caching or implementation details, that's left out to the community. The rest of the paper proceeds to give details on how the type-system, the language, requests and responses should be handled.
Also note that the document does not mention which underlying protocol is being used (although commonly it's HTTP). You could effectively run GraphQL communication over a USB device or over infra-red light.
We hosted an interesting talk at our tech conferences which you might find interesting. Here's a link:
GraphQL Anywhere - Our Journey With GraphQL Mesh & Schema Stitching • Uri Goldshtein • GOTO 2021
If we "Ctrl+F" ourselves to look for things as "Cache" or "ID" we can find the following section which I think would help get to a conclusion here:
ID The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, it is not intended to be human‐readable. While it is often numeric, it should always serialize as a String.
Result Coercion
GraphQL is agnostic to ID format, and serializes to string to ensure consistency across many formats ID could represent, from small auto‐increment numbers, to large 128‐bit random numbers, to base64 encoded values, or string values of a format like GUID.
GraphQL servers should coerce as appropriate given the ID formats they expect. When coercion is not possible they must raise a field error.
Input Coercion
When expected as an input type, any string (such as "4") or integer (such as 4) input value should be coerced to ID as appropriate for the ID formats a given GraphQL server expects. Any other input value, including float input values (such as 4.0), must raise a query error indicating an incorrect type.
It mentions that such field it is commonly used as a cache key (and that's the default cache key for the Apollo collection of GraphQL implementations) but it doesn't tell us anything about "consistency of the returned data".
Here's the link for the full specification document for GraphQL
Warning! Opinionated - My take on ID'sOf course all I am about to say has nothing to do with the GraphQL specification
Sometimes an ID
is not enough of a piece of information to decide whether to cache something. Let's think about user searches:
If I have a FavouriteSearch
entity that has an ID on my database and a field called textSearch
. I'd commonly like to expose a property results: [Result!]!
on my GraphQL specification referencing all the results that this specific text search yielded.
These results are very likely to be different from the moment I make the search or five minutes later when I revisit my favourite search. (Thinking about a text-search on a platform such as TikTok where users may massively upload content).
So based on this definition of the entity FavouriteSearch
it makes sense that the caching behavior is rather unexpected.
If we think of the problem from a different angle we might want a SearchResults
entity which could have an ID and a timestamp and have a join-table where we reference all those posts that were related to the initial text-search and in that case it would make sense to return a consistent content for the property results
on our GraphQL schema.
Thing is that it depends on how we define our entities and it's ultimately not related to the GraphQL spec
A solution for your problemYou can specify how Apollo generates the key for later use as key on the cache as @Matt already pointed in the comments. You may want to tap into that and override that behavior for those entitites that have a __type
equal to your masterVariant
property type and return NO_KEY for all of them (or similar) in order to avoid caching from your ApolloClient on those specific fields.
I hope this was helpful!
QUESTION
I'm trying to set up a component test with Vue Testing Library and Apollo as described in their example.
...ANSWER
Answered 2021-Oct-25 at 12:56I found out I was missing a link
property and I had to call provideApolloClient
:
QUESTION
I'm doing a little api with register and auth using jwt, apollo-vue and graphql
I can`t get data through queries (or set it through mutations) from/to my backend. But i can do it from Postman, cause i know how to send a token in the headers.
I'm too try to call onLogin(apolloClient, token)
bellow the action login from vuex. Nothings work
I'm very newby with backend, i will appreciate any advice
Another problem? : If in the function below...
...ANSWER
Answered 2021-Sep-02 at 16:01From what i see, you only send the token in the authorization header.
QUESTION
I'm trying to understand why most tutorials on Nuxt and Apollo also suggest installing the graphql-tag package.
The @nuxt/apollo module docs say this is optional, if you want to load separated .gql
files (as opposed to... writing your queries inline in your components?) And the official Nuxt/Apollo demo uses separated .gql
files despite not having graphql-tag installed.
I've read this, but it doesn't really seem to answer my question. It just talks about query parsing.
Can anyone tell me precisely what graphql-tag does and whether (and how, in theory) you'd use Apollo with Nuxt without it installed?
...ANSWER
Answered 2021-Jul-01 at 12:42I'm not a graphQL expert but I still achieved to work with it the few last months. At the end, I found out that graphql-tag
is only useful when using inline queries directly into your .vue
components.
Like in this documentation section
QUESTION
I use vue-cli-service serve
to compile scss and bundle the output
This is my webpack configuration inside vue.config.js
ANSWER
Answered 2021-Jun-29 at 08:02I found out the issue by using vue-cli-service inspect
(e.g. npx vue-cli-service inspect
)
This showed me that the webpack entries looked like this:
QUESTION
I have created a file in my plugins directory which looks like this:
...ANSWER
Answered 2021-Jun-18 at 12:03Try to change this from
QUESTION
Context
This question is related to my other question, How to handle apollo client errors crashing page render in Nuxt? , but I'll try to keep this isolated since I'd like this question focused only on Nuxt (minus apollo). However, I decided to ask this separate since I'm looking for an entirely different response/solution.
The problem
I'm currently maintaining a production Nuxt/Vue app that is using the @nuxt/apollo
module to make GraphQL requests.
The problem, is that every now and then, the GraphQL server we rely on goes down and returns an HTML error page, which crashes the Apollo client. But because we're loading Apollo as a nuxt module, it crashes the page render pipeline as well. Giving us a generic server error page that looks like this;
Server error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.
And the following stack trace:
...ANSWER
Answered 2021-Feb-11 at 09:44EDIT: I myself think that the problem lies somewhere in the Vue Apollo plugin or Nuxt Apollo module and how errors are handled there. I would think you can handle the error directly at the Apollo module but that is not possible in SSR.
You have to keep in mind that you probably need another solution for both CSR as well as for SSR.
In short, what happens is that the renderRoute
fails and because of this SSR ends up in the default errorMiddleware
of Nuxt.
1: Calling Apollo query directly, this gives you full control over the error handling for that page and will work for both CSR and for SSR
QUESTION
While trying to get material icons to load on my Vuetify project (with Webpack and Apollo) I am unable to get my app to display at all.
I followed the installation instructions from Vuetify for webpack, but am getting an error
...ANSWER
Answered 2021-Feb-10 at 23:06You are importing Vuetify as separate components.
Please try to import Vuetify class directly:
QUESTION
I am attempting to write a HackerNews clone using a graphql api written in Go with the graph-gophers package as the backend, and a Vuejs app with the apollo graphql-client as the frontend. Relevant Github Repos Backend Frontend.
I have recently implemented subscription functionality and it does appear to work, but whenever I upvote a link I get a nasty error in the javascript console, the full text for which is below.
...ANSWER
Answered 2020-Dec-14 at 02:40I ended up figuring this out. The cause of the error was when updating the store when an upvote occurred, I had been focusing on the vote subscription in the graphql schema, when the issue was actually in the upvote mutation. The link returned as part of the schema was missing an id.
QUESTION
We have a graphql query that is executed like this:
...ANSWER
Answered 2020-Dec-01 at 13:52Figured it out. we only needed to check the __typename
property before returning the object data 'array':
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-apollo
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page