Repository apollo-module

filipwronski

filipwronski posted a new question

apollo-module • 4 days ago

Cannot force GET method

I'm trying to force GET method in my request to GraphQL API, I need it to allow Service Worker Cache API to save API request data. But I have error and I'm stuck:

Uncaught (in promise) Error: Network error: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

This is my nuxt.config.js apollo config:

apollo: {
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: "Basic", // optional, default: "Bearer"
    /* tslint:disable */
    errorHandler(error) {
        console.log("%cError", "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;", error.message);
    },
    /* tslint:enable */
    clientConfigs: {
        default: {
            // required
            httpEndpoint: "http://myprivateapi",
            // optional
            // See https://www.apollographql.com/docs/link/links/http.html#options
            httpLinkOptions: {
                fetchOptions: { method: "GET" },
                /* tslint:disable */
                fetch: (uri, options) => {
                    const { body, ...newOptions } = options;
                    const queryString = objectToQuery(JSON.parse(body));
                    requestedString = uri + queryString;
                    return fetch(requestedString, newOptions);
                },
                /* tslint:enable */
            },
        },
    },

    networkInterfaces: {
        default: "~/apollo/network-interfaces/default.ts",
    },
},

Is there anything wrong?

ImreC

ImreC posted a new bug report

apollo-module • 9 days ago

bug Nuxt apollo module crashes ava

Version

4.0.0-rc2.3

Reproduction link

https://github.com/ImreC/nuxt-ava-problem

Steps to reproduce

  • npm run test --> Ava crashes with 'nuxt build error'
  • remove store/index.js line 1 (the gql import) --> Ava works fine
  • npm run dev always works and produces results as expected

What is expected ?

I am trying to run ava tests on a default app containing the apollo module. I am expecting ava testing using npm run test to work

What is actually happening?

Ava testing crashes with a 'nuxt build error'. Removing the gql import fixes everything.

ImreC

ImreC posted a new question

apollo-module • 20 days ago

Is it possible to suppress _typename from result?

Is it possible to suppress the _typename from the apollo query result as suggested in this issue?
https://github.com/apollographql/apollo-client/issues/1913

filipwronski

filipwronski posted a new question

apollo-module • 20 days ago

How I can assigne more values on client side to server side result?

I'm creating listing with load more option. On server side I'm loading first 12 results of query and on client side I want to add values from "load more" to server side result.

On server side I haven't access to "this" so i don't now how assign to result of server side and client side to the same variable -1

Here is my query:

apollo: {
            searchProperties: {
                query: PROPERTY_LISTING_SEARCH,
                prefetch: (route) => {
                    return {
                        searchFilters: {
                            type: 'FLAT',
                            transaction: 'SALE',
                            dictionaries: []
                        },
                        numberOfResults: 12,
                        pageNumber: 1,
                        searchOrder: {
                            sortKey: "RANK",
                            sortOrder: "ASC"
                        },
                    }
                },
                variables () {
                    return {
                        searchFilters: this.searchFilters,
                        numberOfResults: this.pagination.elementsPerPage,
                        pageNumber: 1,
                        searchOrder: {
                            sortKey: this.sort.sortKey,
                            sortOrder: this.sort.sortOrder,
                        },
                    };
                },
                result(data) {
                    if(process.client) {
                        console.log(data.data.searchProperties)
                    }

                    this.loading = data.loading;
                    if (!this.viewLoaded) {
                        this.viewLoaded = true;
                    }
                }
            },
        },
mahadoang

mahadoang posted a new question

apollo-module • 22 days ago

vendors.app.js:11402 Uncaught ReferenceError: require is not defined

Version
v4.0.0-rc.2

Reproduction link
https://github.com/nuxt-community/apollo-module

Steps to reproduce

  1. npx create-nuxt-app test-nuxt
  2. cd test-nuxt
  3. npm install --save @nuxtjs/apollo
  4. add nuxt.config.js

modules: [ "@nuxtjs/apollo", ], apollo:{ clientConfigs:{ default:{ httpEndpoint: 'http://localhost:4000/graphql', wsEndpoint: 'ws://localhost:4000/graphql' } } }

  1. npm run dev

display error on browser

vendors.app.js:11402 Uncaught ReferenceError: require is not defined at Module../node_modules/graphql/jsutils/instanceOf.mjs (vendors.app.js:11402) at __webpack_require__ (runtime.js:788) at fn (runtime.js:151) at Module../node_modules/graphql/type/definition.mjs (vendors.app.js:15413) at __webpack_require__ (runtime.js:788) at fn (runtime.js:151) at Module../node_modules/graphql/type/validate.mjs (vendors.app.js:17459) at __webpack_require__ (runtime.js:788) at fn (runtime.js:151) at Module../node_modules/graphql/graphql.mjs (vendors.app.js:10817)

how to fixed.
Thank you.

kieusonlam

kieusonlam posted a new bug report

apollo-module • 22 days ago

bug Cannot stringify POJOs with symbolic keys on nuxt 2

Version

v4.0.0-rc.2

Reproduction link

https://github.com/nuxt-community/apollo-module

Steps to reproduce

I get this error after update nuxt 2.0.0 to 2.1.0, revert back to 2.0.0 still geting the problem. It's happen on my both 2 project when return the value that query by apollo in asyncData:

  async asyncData({ error, app, params }){
    const post = await app.apolloProvider.defaultClient.query({
      query: postQuery,
      variables: { slug: params.slug }
    }).then(({ data }) => data && data.post)

    if (!post) return error({ statusCode: 404, message: 'Not found!!' })

    return { post }
  },

Nuxt 1.4.2 is working normally, anyone have the same problem? Another weird thing, on codesanbox, nuxt 2.1.0 still working.

What is expected ?

Shouldn't get error.

What is actually happening?

Getting error.

blocka

blocka posted a new question

apollo-module • a month ago

Sending a 404 from an error link

I'm trying to send a 404 when I my GQL server returns a "Resource not found" error.

    const errorLink = onError(({graphqlErrors}) => {
        if (graphqlErrors) {
            if (graphqlErrors.some(x => x.message === 'No resource could be found')) {
                ctx.error({statusCode: '404', message: 'Not Found'})
            }
        }
    })

I've verified that it's correctly using the errorLink, but it's still sending a 500 error and showing the nuxt error page.

dweldon

dweldon posted a new bug report

apollo-module • a month ago

bug IE 11 polyfill broken with Nuxt 2.0 + apollo-module

Version

v4.0.0-rc.2

Reproduction link

https://github.com/dweldon/nuxt-polyfill-issue

Steps to reproduce

git clone https://github.com/dweldon/nuxt-polyfill-issue.git
cd nuxt-polyfill-issue && npm i
npm start

Navigate to http://localhost:3000/

What is expected ?

The page should render "Hello World"

What is actually happening?

On IE 11, an error page is rendered. Object.entries is undefined.

Additional comments?

I don't know if this is a bug with apollo-module, or with Nuxt 2.0, but the combination breaks on IE 11, and probably many other older browsers. If I remove the apollo-module code, Object.entries is defined. This implies one of: (1) Nuxt is executing core-js too late, (2) apollo-module or one of its dependencies is overwriting the polyfill.

igtm

igtm posted a new feature request

apollo-module • a month ago

idea defaultOptions is not configurable

What problem does this feature solve?

I'd like to set defaultOptions like this.
But it does't seem to be configurable.

Any plan of adding this feature?

Thanks in advance.

kavalcante

kavalcante posted a new bug report

apollo-module • a month ago

bug Handling Errors when using asyncData

Version

v4.0.0-rc.2

Reproduction link

http://cant-reproduce-because-its-to-complicate-to-simulate-a-specific-error.com

Steps to reproduce

Sometimes Apollo send errors reports with data included. For example, ACL errors (calling that some fields you can't view). However, the data was found and in some cases they are a real data (even with errors).

However, when calling the query in asyncData, it's break the Nuxt build, same happen with try/catch.

What is expected ?

Errors come together on the request result and not break nuxt compilation because a "Internal server error".

What is actually happening?

Nuxt breaks compilation and if the await is inside a try/catch, the rest of the try is ignore and the errors go right to catch function.

ImreC

ImreC posted a new question

apollo-module • a month ago

Entering nuxt app from specific route throwing server error when using Apollo in asyncData. Why?

I have a nuxt app running and got a bug report that someone shared a link to a certain route in my application. When the link was clicked the person got a server error. Upon investigating further I found that it happens when I browse inPrivate too. The culprit is this piece of code:

    async asyncData({app, params}) {
      let client = app.apolloProvider.defaultClient
      const result = await client.query({
        query: someQuery,
        variables: {
          params
        }
      })
      const res= result.data.someResult
      return { res }
    }

The error message is: “Network error: str must be a string”

It works perfectly when:

  • accessing the route from the application
  • opening the route directly on the desktop/mobile chrome and firefox in normal mode
  • opening the route in private mode when other routes have already been opened

It throws errors when:

  • going directly to this page from mobile Samsung browser
  • going directly to this page in incognito/private mode

The current workaround is to move the Apollo query from asyncData to created. My question is: “Why does this happen?”. I simply have no idea.

Vlaoff

Vlaoff posted a new bug report

apollo-module • a month ago

bug "Uncaught ReferenceError: require is not defined" when using nuxt-edge

Version

v4.0.0-rc.2

Reproduction link

https://github.com/Vlaoff/apollonuxt

Steps to reproduce

I get the error when I launch nuxt and open it in the browser

What is expected ?

Babel should transpile the require

What is actually happening?

Babel keeps the require

Additional comments?

I think it's a problem with the babel 7/wepack 4 configuration.

It does not occur on nuxt 1.4.2, only on the nuxt-edge 2.0.0-xxx

I don't know if the problem is from @nuxtjs/apollo or nuxt.

ksbgenius

ksbgenius posted a new question

apollo-module • 2 months ago

how to version 3.0.7 to 4.0.0-rc1

I'm using versiong 3.0.7

I just use nuxt.config.js like..

modules: [
'nuxt-device-detect',
'@nuxtjs/apollo',
'@nuxtjs/axios',
'@nuxtjs/sitemap'
],
apollo: {
clientConfigs: {
default: '~/apollo/client-configs/default.js'
},
includeNodeModules: true
}

and my ~/apollo/client-configs/default.js like this..

// Example without subscription
import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
// import https from 'https'
import apiServer from '~/utils/api-server'

export default (ctx) => {
const uri = apiServer.getRouteUrl('graphQL')
let fetchOptions = {}

const httpLink = new HttpLink({
uri,
fetchOptions,
credentials: 'include'
})

// auth token
// let token = process.server ? ctx.req.session : window.NUXT.state.session

// middleware
const middlewareLink = new ApolloLink((operation, forward) => {
const headers = apiServer.getTokens()
operation.setContext({
headers
})
// return forward(operation) // 기본 미들웨어 리턴…
return forward(operation)
.map(response => { // Afterware Code : 이 코드는 Request의 응답(Response)에 대한 전처리 작업을 진행한다.
const context = operation.getContext()
const {
response: {
headers
}
} = context
// 헤더를 읽어서 토큰정보를 가져와 로컬스토리지에 저장한다.
if (headers) {
apiServer.setTokens(headers)
}
return response
})
// afterware : graqhQL 호출후 응답에 대한 선처리
})

const link = middlewareLink.concat(httpLink) // ApolloLink.from([middlewareLink, httpLink])

return {
link,
cache: new InMemoryCache(),
connectToDevTools: true // DEBUG
}
}

when i version upgrade to 4.0.0-rc1 or version 4

using method so difficult…

can you help me version up?

nodegin

nodegin posted a new bug report

apollo-module • 2 months ago

bug TypeError: apolloProvider.prefetchAll in [email protected]

If I ran fresh npm install, [email protected] will be installed.

When running the application, the app will die from TypeError: apolloProvider.prefetchAll is not a function

However npm i -S [email protected] fixed this issue.

a-zog

a-zog posted a new bug report

apollo-module • 2 months ago

bug ApolloProvider.provide() is deprecated. Use the 'apolloProvider' option instead...

Version

v4.0.0-rc.1

Reproduction link

https://cmty.app/nuxt/issues/new?type=bug-report&repo=apollo-module

Steps to reproduce

Get a fresh nuxt install
Install / Config Apollo Module
Run the app

What is expected ?

To run smoothly as it was few days ago

What is actually happening?

Two error messages:
apolloProvider.prefetchAll is not a function

that is due to:

<ApolloProvider>.provide() is deprecated. Use the 'apolloProvider' option instead with the provider object directly.

Additional comments?

Installed dependencies:

nuxtjs/apollo : 4.0.0-rc1
nuxtjs/axios : 5.3.1
nuxtjs/component-cache : 1.1.2
nuxtjs/pwa : 2.0.8
nuxt : 1.4.1

This could be possible after this vue-apollo commit: https://github.com/Akryum/vue-apollo/commit/62829e4a969532f8a4568302ff6f89286cde5b77

Some changes may be needed @ .nuxt/apollo-module.js

a-zog

a-zog posted a new bug report

apollo-module • 2 months ago

bug ApolloProvider.provide() is deprecated. Use the 'apolloProvider' option instead...

Version

v4.0.0-rc.1

Reproduction link

https://cmty.app/nuxt/issues/new?type=bug-report&repo=apollo-module

Steps to reproduce

Run the app.

What is expected ?

To run smoothly as it was few days ago

What is actually happening?

Two error messages:
apolloProvider.prefetchAll is not a function

that is due to:

<ApolloProvider>.provide() is deprecated. Use the 'apolloProvider' option instead with the provider object directly.

Additional comments?

This could be possible after this vue-apollo commit: https://github.com/Akryum/vue-apollo/commit/62829e4a969532f8a4568302ff6f89286cde5b77

Some changes may be needed @ .nuxt/apollo-module.js

bjunc

bjunc posted a new question

apollo-module • 2 months ago

apolloProvider.prefetchAll is not a function

I'm getting the error above, which seems to stem from:

<ApolloProvider>.provide() is deprecated. Use the 'apolloProvider' option instead with the provider object directly.

Which seems to originate from within the plugin file in the module, implying that the internal plugin code goes against the internal module code. This is all internal to the @nuxtjs/apollo module. I'm using v3.0.7.

igtm

igtm posted a new feature request

apollo-module • 2 months ago

idea global errorHandler is not configurable

What problem does this feature solve?

I'd like to set my custom errorHandler.
but it doesn't seem to be configurable.
https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L75-L77

Are there any plan of adding this feature?

nomadoda

nomadoda posted a new question

apollo-module • 2 months ago

Cookies authentication

I'm sorry, I really struggle to understand how to use the authentication provided by the apollo module. My server creates a session on login and returns a cookie header to the nuxt client. The cookie is then sent on further requests back to the server, but it only works when the request is made from the client, not when rendered on server. I guess this is where the apollo authentication is supposed to come in? That somehow the $apolloHelper.onLogin() should be used to store the cookie, so that it can be sent on requests made on the server? It seems that the apollo authentication methods only work for dealing with token-based authentication, I'm not sure how I would use it with cookies. Any examples out there?

negezor

negezor posted a new question

apollo-module • 2 months ago

How to make data from asyncData reactive?

I use the asyncData method to return 404 if there is no data, when writing to the store, the data is not updated. How do I make them reactive?

async asyncData({ app, params, error }) {
    const { defaultClient } = app.apolloProvider;
    const { url } = params;

    const { data } = await defaultClient.query({
        query: fetchUserDashboard,
        variables: { url },
    });

    if (!data.user) {
        return error({
            statusCode: 404,
            message: 'User not found!'
        });
    }

    return data;
}

With a similar smart query, they are updated, but I can not send to user 404.

apollo: {
    user: {
        query: fetchUserDashboard,
        prefetch: true,
        variables() {
            return {
                url: this.url
            };
        }
    }
},

My mutation store.

this.$apollo.mutate({
    mutation: uploadUserAvatar,
    variables: {
        input: {
            userId: this.user.id,
            avatar: target.files[0]
        }
    },
    update: (store, { data: { uploadUserAvatar: { avatar } } }) => {
        store.writeFragment({
            id: `User:${this.user.id}`,
            fragment: gql`
                fragment writeUserAvatar on User {
                    avatar {
                        id

                        sizes {
                            type
                            url
                        }
                    }
                }
            `,
            data: {
                avatar,
                __typename: 'User'
            }
        });
    }
})