ririen posted a new bug report
apollo-module •
Don't have.
Use package @nuxtjs/vercel-builder and @nuxtjs/apollo to run Nuxt with Vercel.
Clean run without problems.
[GET] /
20:18:39:58
Error Network error: Expected signal to be an instanceof AbortSignalError Network error: Expected signal to be an instanceof AbortSignal ERROR Network error: Expected signal to be an instanceof AbortSignal at new ApolloError (nodemodulesdev/apollo-client/bundle.umd.js:92:0) at server.js:48937:34 at server.js:49357:15 at Set.forEach (<anonymous>) at server.js:49355:26 at Map.forEach (<anonymous>) at QueryManager.broadcastQueries (nodemodulesdev/apollo-client/bundle.umd.js:2004:0) at server.js:48832:29
Ettapp posted a new bug report
apollo-module •
https://codesandbox.io/s/recursing-fire-yf046?file=/pages/index.vue
The reproduction link is a simple Nuxt project with @nuxt/apollo
and graphql-tag
dependencies.
The demo page use a smart query and the fetch()
method.
The page component should render normaly.
The page quickly flash before the error Cannot set property character of #<Object> which has only a getter
pops.
This comment indicate that when a component is mounted, vue-apollo will check if there is already a data property for every smart query or not. If not, it will create a property with a getter-only, which returns an internal property.
and in their case, as the method was called many times, the subsequents calls made Vue-Apollo try to reassign a value to the getter-only property.
Maybe the issue is similar here, with Apollo-Vue making a query two times (using fetch()
, even empty, trigger a second query ?!)
Maybe linked with https://cmty.app/nuxt/apollo-module/issues/c308
malkhuzayyim posted a new bug report
apollo-module •
npm run dev
nuxt-vite dev server starts normally.
Getting a blocking error that blocks compilation, app doesn't even build when using nuxt-vite and nuxt-apollo together in the same project.
Would be great if nuxt-apollo was compatible with nuxt-vite, if I was able to submit a PR for this I would, for now I'll have to settle for submitting this issue and hope that someone else takes care of this.
Much appreciated, thank you.
malkhuzayyim posted a new question
apollo-module •
When trying to fire up the nuxt dev server using nuxt-vite, there seems to be a blocking error with the nuxt-apollo plugin regarding a require
statement that is being used in the module source code.
Would be great if this was nuxt-vite compatible, if I was able to submit a PR for this I would, for now I'll have to settle for submitting this issue and hope that someone else does.
kukosek posted a new question
apollo-module •
I am currently using it like this:
@Component<Index>({
components: {
Card
},
apollo: {
donates: {
query: DONATES_QUERY,
variables: {
skip: 0,
take: take,
search: "",
sortBy: "HOT",
donatorId: null
},
prefetch: true,
},
donator: {
query: DONATOR_QUERY,
variables: {
id: null },
prefetch: true,
}
}
})
export default class Index extends Vue {
private donates: CardData[] = [
]
private donator: Donator = {name: "", amountDonated: 0, donationCount: 0, score: 0}
...
}
However, it seems impossible to access this (i want this.$route.params.something) in the component declaration in the id field where null currently is.
So how do I do that?
esiao posted a new question
apollo-module •
I'm unsure if this is a bug or me missing some configuration to get @nuxtjs/apollo
to refresh the page's data with SSR.
I'm using "@nuxtjs/apollo": "^4.0.1-rc.5"
with "nuxt": "^2.14.12"
.
In dev mode I have no issues, my page data is correctly fetched, and if I change some of its data on my API and then reload the page, the data gets updated.
Nuxt is set to target the server, so it's not building static files.
When I'm in SSR with nuxt build && nuxt start
I have the page displays the right data, so SSR seems to work. However, if I edit my API's data and then reload the page I don't get the page content updated but rather the version I had when I ran nuxt start
.
If I restart the application and reload the page, I have the right updated data show up.
I feel like this might be a caching-related issue.
Here's my apollo config that gets loaded into Nuxt:
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import introspectionQueryResultData from './graphql.schema.json'
const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData
})
const cache = InMemoryCache({ fragmentMatcher })
export default function (ctx) {
return {
httpEndpoint: MY_ENDPOINT,
cache
}
}
I need the Fragment Matcher in order to use GraphQL fragments and generate the types with codegen. This works like a charm in dev but might be the reason why it doesn't work in SSR even though I don't understand why.
On my Vue component to render my page here's my configuration:
apollo: {
page: {
prefetch: true,
query: queryPage, // GraphQL query with .gql file
variables() {
return {
id: 2
}
}
}
}
I do not understand why my server isn't refetching the data after being started. I tried to debug by using Apollo Client Devtools but couldn't get it to show up in server mode. I couldn't find a way either to force it connectToDevTools: true
in the apollo config, it looks like it's not taken into account.
How can I get my page to fetch the data when loaded, without having to restart the application after each update on my API's content?
Thanks,
Aurélien
aullman posted a new question
apollo-module •
I have a query with a subscribeToMore that updates every time a new value is added. By default the query was being prefetched by the server with SSR and then when the client loads it would connect to the websocket for any updates after that. The issue I was running into was that there is a gap between when the server prefetches the results and when the client connects to the websocket so if any new items were added in that window the client would miss them. The fix was simply to set prefetch:false
on the query however I thought this would be a common issue to run into and thought that the apollo module should probably account for this. It seems like generally prefetching any query with a subscribeToMore is a bad idea unless you are going to do another query in the client after they have established their websocket connection to cover any gaps.
LuXDAmore posted a new bug report
apollo-module •
https://codesandbox.io/s/nuxt-apollo-module-token-name-bug-ym7pn
tokenName
value per-client
.It should create differents cookies per-clients.
Create only one cookie used by all the clients, with the name 'apollo-token'.
The version i'm using is the 4.0.1-rc.5
, but it's not present in the list.
From the generated file .nuxt/apollo-module.js
:
const AUTH_TOKEN_NAME = 'apollo-token';
const defaultTokenName = '' || AUTH_TOKEN_NAME;
const authTokenName = '' || AUTH_TOKEN_NAME;
cookies.set( AUTH_TOKEN_NAME, token, cookieAttributes );
cookies.remove( AUTH_TOKEN_NAME, cookieAttributes );
Every cookie / name
is based on the default value and not from the provided tokenName
per-client.
dnstylish posted a new question
apollo-module •
i am try use modify, identify methods after mutate…but i get error "xxx not a funtion"
I am using writeData instead but on the apollographql homepage they say "client | cache.writeData has been completely deleted."
const {
data: { replyParaComment }
} = await this.$apollo.mutate({
mutation: REPLY_PARA_COMMENT,
variables: {
commentID: this.comment.id,
content: this.content,
image: this.image
},
update: (store) => {
// store.modify => undefined function
console.log(store.identify(this.comment))
const newComment = Object.assign({}, this.comment)
newComment.countReply++
store.writeData({
id: this.comment.__typename + ':' + this.comment.id,
data: newComment
})
}
})
about modify and identify method here: https://www.apollographql.com/docs/react/caching/cache-interaction/#cachemodify
andig89 posted a new bug report
apollo-module •
https://codesandbox.io/s/apollo-nuxt-ex-1-xqrtg
Reload page or build and run es-check es5 .nuxt/dist/client/*.js
.
No error "cannot redefine property: $apollo" and es5 compatibility on build pack.
Error or no es5 compatibility.
Without transpile, es-check throw error. With transpile I have the error "cannot redefine property: $apollo" :/. I don't know if it's @nuxtjs/apollo or vue-apollo problem so first I try here :).
jrcichra posted a new question
apollo-module •
I have a mutation that should upload a file but doesn't. The attchment size is bigger than what the 'Network' tab shows, so the picture must not be in the POST.
Full source tree at question commit: https://github.com/jrcichra/loxodonta/tree/5b463103b3e3902b16fb259d8e852cf8c24765f0
You can recreate the problem with docker-compose build && docker-compose up
and go to http://localhost:3000. Pick a file and look at the network tab.
Form:
<b-form inline @submit="newFile">
<b-form-file v-model="form.attachments" accept=".jpg, .png, .gif">
</b-form-file>
<b-button type="submit" class="postbutton">Post</b-button>
</b-form>
data():
data() {
return {
username: "Justin",
placeholder: "What's on your mind?",
form: {
text: "",
attachments: [],
},
};
},
Method:
async newFile(event) {
event.preventDefault(); //Don't submit the page
var file = this.form.attachments;
if (file) {
console.log(file);
try {
await this.$apollo
.mutate({
mutation: newfile,
variables: {
file,
},
})
.then(({ data }) => console.log(data));
} catch (e) {
console.error(e);
}
} else {
console.error("attachments were not defined but newFile was called");
}
},
Mutation client-side:
mutation newFile($file: Upload!) {
newFile(file: $file) {
filename
mimetype
encoding
}
}
nuxt.config.js:
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'http://localhost:3001/graphql',
}
}
},
According to https://github.com/nuxt-community/apollo-module/issues/259, apollo-upload-client
is already implemented. What am I missing? Thanks.
Screenshots:
toddpadwick posted a new question
apollo-module •
I have set up the default client config with a full https url as the httpEndpoint. However, in the production build, queries in methods seem to use a relative path to /graphql
which results in a 404. The strange thing is, these methods work fine in the development build. Smart queries, work fine in all builds.
Here is one of my methods:
getEntry(slug) {
const apolloClient = this.$apolloProvider.clients.defaultClient; // This gets the default client
console.log(apolloClient); // this successfully returns the default client, so no error here
this.loading = true;
const variables = {
slug:slug,
site:this.$i18n.locale
}
return new Promise((resolve, reject) => {
apolloClient.query({
query:GET_ENTRY,
variables:variables
}).then(({data}) => {
this.entry = data.entry;
this.loading = false;
}).catch(err => {
this.error = "Sorry, we can't find that article";
console.log(err);
this.loading = false;
})
});
}
Here is my default client. config
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import schema from './schema.json';
const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData: schema
})
export default ({req, app}) => {
const token = process.env.GRAPHQL_TOKEN
// let headersVal = {
// 'Accept-Language': app.i18n.locale
// }
return {
httpEndpoint:'https://api.madefair.org/graphql',
getAuth: () => `Bearer ${token}`,
cache: new InMemoryCache({ fragmentMatcher }),
}
}
The error I get is as follows:
POST https://stage.madefair.org/graphql 404
384b416.js:1 Error: Network error: Unexpected token < in JSON at position 0
Notice that the url it is attempting to query is not the url in the http Endpoint. so it seems to have used a relative url of just graphql
and appended it to the current client url. where is it generating this from?
I am assuming the unexpected token error is just because its html returned from a 404, rather than json.
smonkey72 posted a new question
apollo-module •
Is there any solution to access ApolloClient
provided by@ nuxtjs / apollo-module
, if this
is not available? This is e.g. the case in Vue-Router
s beforeRouteEnter
.
I think its a common use case to do an api request before a route is loaded, to decide if the route is valid or a 404 should thrown.
SuddenlyRust posted a new bug report
apollo-module •
v4.0.1-rc.5
@nuxtjs/[email protected]
@vue/[email protected]
https://github.com/SuddenlyRust/nuxt-apollo-composition-api
yarn install
yarn dev
Visit http://localhost:3000/
Working application without error message.
Following error shown: Cannot read property '_apolloAppTracking' of undefined
Downgrading to @nuxtjs/[email protected]
does fix it!
it-sha posted a new feature request
apollo-module •
Hook asyncDate({error}){…} has the option to handle errors with redirection to the error page that works fine in client-side and server-side.
For Appollo Smart Queries it seems like we have no options to do that on server side
We have this problem from 2017 (ex. https://github.com/nuxt-community/apollo-module/issues/42) but it seems like we have no solution for smart query and have to use code like
async asyncData({error, app, params}){
const article = await app.apolloProvider.defaultClient.query({
query: `someGql`,
variables:{id: params.id}
}).then(({data}) => data && data.Article)
if(!article){
return error({statusCode: 404, message: 'Not found'})
}
return {article}
}
but Smart Query is a much more elegant solution and gives many benefits.
apollo: {
queryName: {
query: someGql,
update: (data) => data.allPets,
error({ errorData, redirect }) {
const statusCode = errorData.networkError.statusCode;
if(statusCode = 404){
redirect('/404')
}
},
},
},
it-sha posted a new question
apollo-module •
It seems like the error hook inside Smart Queries has no option to make redirection to the 404 page that works fine on the client-side and server-side as well.
In 2017 we have a simular question Unable to use Nuxt's error/redirect functionality when a query failed · Issue #42
But at that moment the only solution was to use asynData({error})
Do we have any changes in 2021?
Smart Query looks like a much more elegant solution than code like
async asyncData({error, app, params}){
const article = await app.apolloProvider.defaultClient.query({
query: `someGql`,
variables:{id: params.id}
}).then(({data}) => data && data.Article)
if(!article){
return error({statusCode: 404, message: 'Not found'})
}
return {article}
}
sgarcia-dev posted a new bug report
apollo-module •
https://github.com/sgarcia-dev/error-apollo-client-nuxt/tree/nuxt-apollo-error-handling
nuxt-apollo-error-handling
branch)npm install
npm run dev
localhost:<port>
(logged to the console, likely localhost:3000
)Response not successful: Received status code 400
at new ApolloError (node_modules/apollo-client/bundle.umd.js:92:26)
at node_modules/apollo-client/bundle.umd.js:1486:27
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:94:5)
That the smart query error handler, or nuxt config error handler, catch the error, and allow the page render to render with a fallback value when network errors happen. Be it that the server is down, or that it responds with a mismatching HTML response that yield the common Unexpected token < in JSON at position 0
error.
page render crashes, and we have no way of doing anything with the error beyond logging it to the console using supported Vue apollo error handler, and nuxt apollo global error handler.
The only way to handle error in a way we can silence it or deal with it at this time, is hooking up afterware to apollo client directly using apollo-link-error
like in this branch/file of the repo;
https://github.com/sgarcia-dev/error-apollo-client-nuxt/blob/master/apollo/apollo-link-error.js
However, while this works (even though its not documented in the @nuxt/apollo
docs), this causes a nuxt hydration issue: The client-side rendered virtual DOM tree is not matching server-rendered content.
, which throws a white screen on production mode.
Also, you can find a Stack Overflow in depth question I wrote with the things we tried to silence these errors;
https://stackoverflow.com/questions/66029623/how-to-handle-apollo-client-errors-crashing-page-render-in-nuxt
fabis94 posted a new question
apollo-module •
I can see from package.json that this uses vue-apollo 3.x which I think only supports Apollo Client 2. Is it possible to make this package use Apollo Client 3 or is that a feature request?
chadidi posted a new question
apollo-module •
Is there an option to use HTTP
only?
DaveMuirhead posted a new bug report
apollo-module •
https://discord.com/channels/473401852243869706/507590246070878210/805808885390245908
npx create-nuxt-app nuxt-graphql
cd nuxt-graphql
npm install @nuxtjs/apollo
Installation of @nuxtjs/apollo into NuxtJS app
Dependency resolution errors. I can provide the complete NPM debug log if you want it. This error is also reported by other users today on the #apollo channel of the Nuxt.js Discord server.
[594][davem: nuxt-graphql]$ npm install --save @nuxtjs/apollo
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN nodemodules/graphql
npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN nodemodules/apollo-cache-inmemory
npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm WARN nodemodules/@nuxtjs/apollo
npm WARN 1 more (vue-cli-plugin-apollo)
npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN nodemodules/apollo-link-persisted-queries
npm WARN [email protected]"^0.2.2" from [email protected]
npm WARN nodemodules/vue-cli-plugin-apollo
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN nodemodules/graphql
npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN nodemodules/apollo-cache-inmemory
npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm WARN nodemodules/@nuxtjs/apollo
npm WARN 1 more (vue-cli-plugin-apollo)
npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 || ^14.0.0" from [email protected]
npm WARN nodemodules/graphql-subscriptions
npm WARN [email protected]"^1.1.0" from [email protected]
npm WARN nodemodules/vue-cli-plugin-apollo
npm WARN 1 more (apollo-server-express)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN nodemodules/graphql
npm WARN peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm WARN nodemodules/apollo-cache-inmemory
npm WARN peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm WARN nodemodules/@nuxtjs/apollo
npm WARN 1 more (vue-cli-plugin-apollo)
npm WARN 8 more (apollo-client, apollo-link, graphql-tag, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer [email protected]"^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from @apollographql/graphql-language-service-interfac[email protected]
npm WARN nodemodules/@apollographql/graphql-language-service-interface
npm WARN @apollographql/[email protected]"^2.0.2" from [email protected]
npm WARN nodemodules/apollo-language-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! nodemodules/graphql
npm ERR! peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! nodemodules/apollo-cache-inmemory
npm ERR! peer [email protected]"^1.6.6" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"" from the root project
npm ERR! [email protected]"^1.6.6" from [email protected]
npm ERR! nodemodules/vue-cli-plugin-apollo
npm ERR! [email protected]"^0.22.2" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"" from the root project
npm ERR! peer [email protected]"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
npm ERR! nodemodules/apollo-client
npm ERR! peer [email protected]"^2.0.0" from [email protected]
npm ERR! nodemodules/vue-apollo
npm ERR! [email protected]"^3.0.5" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"" from the root project
npm ERR! [email protected]"^2.6.10" from [email protected]
npm ERR! nodemodules/vue-cli-plugin-apollo
npm ERR! [email protected]"^0.22.2" from @nuxtjs/[email protected]
npm ERR! nodemodules/@nuxtjs/apollo
npm ERR! @nuxtjs/[email protected]"" from the root project
npm ERR! 7 more (apollo-link, graphql-tag, vue-cli-plugin-apollo, …)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from @apollographql/[email protected]
npm ERR! nodemodules/@apollographql/graphql-language-service-interface/nodemodules/@apollographql/graphql-language-service-parser
npm ERR! @apollographql/[email protected]"^2.0.0" from @apollographql/[email protected]
npm ERR! nodemodules/@apollographql/graphql-language-service-interface
npm ERR! @apollographql/[email protected]"^2.0.2" from [email protected]
npm ERR! nodemodules/apollo-language-server
npm ERR! [email protected]"^1.25.0" from [email protected]
npm ERR! nodemodules/apollo
npm ERR! 1 more (apollo-codegen-core)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/davem/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/davem/.npm/logs/2021-02-01T144522425Z-debug.log