apollo-client | 易学教程

How to use data from readFragment in Apollo?

阅读更多关于 How to use data from readFragment in Apollo?

问题 After a login mutation, a jwt token and a user object (id and firstName) are returned and stored in cache (as shown in the image below). I want to retrieve the user informations from the cache by using readFragment and pass it to Layout component. So I've tried to use read Fragment in my Layout component like this : class Layout extends Component { render() { const test = this.props.client.readFragment({ id: 1, // `id` is any id that could be returned by `dataIdFromObject`. fragment: gql`

Update state with Apollo Client

阅读更多关于 Update state with Apollo Client

问题 I am trying to use ApolloClient with Vuex but I stumbled upon a problem I can't resolve. I call ApolloClient.query() function inside a vuex action but it seems like the function always returns a resolved promise from the first action call. So, after the function got fired once, no request goes to the server and I get the same result as when I load the page (although the actual data in database gets changes). If I take a look at Apollo Dev Tools, there's also no changes to the Apollo state

Using Apollo's MockedProvider why don't the component's props get populated with result?

阅读更多关于 Using Apollo's MockedProvider why don't the component's props get populated with result?

问题 Following some ideas from this Gist, I am unable to get a component test to work as expected. Everything seems to work except the props never get populated with the data from the response. Any reason why this isn't working as I expect it to? Here is the simplest real-world example I could make based on an existing component: // test-component.js import React from 'react'; import { graphql } from 'react-apollo'; import userQuery from './userQuery.graphql'; function TestComponent (props) {

GraphQL dynamic query building

阅读更多关于 GraphQL dynamic query building

问题 I have a GraphQL server which is able to serve timeseries data for a specified source (for example, sensor data). An example query to fetch the data for a sensor might be: query fetchData { timeseriesData(sourceId: "source1") { data { time value } } } In my frontend, I want to allow the user to select 1 or more sources and show a chart with a line for each one. It seems like this would be possible by using a query like this: query fetchData { series1: timeseriesData(sourceId: "source1") {

Reset store after logout with Apollo client

阅读更多关于 Reset store after logout with Apollo client

问题 I'm trying to reset the store after logout in my react-apollo application. So I've created a method called "logout" which is called when I click on a button (and passed by the 'onDisconnect' props). To do that I've tried to follow this example : https://www.apollographql.com/docs/react/recipes/authentication.html But in my case I want LayoutComponent as HOC (and it's without graphQL Query). Here is my component : import React, {Component} from 'react'; import { withApollo, graphql } from

How to chain together Mutations in apollo client

阅读更多关于 How to chain together Mutations in apollo client

问题 I have a bunch of information stored in my state that I need to pass to my graphQL server using mutations, but I need to use the results of each mutation before I call the next one since I need to: Create a new object in my database Use the id generated for that object to create another object Modify the original object to store the id generated by the second object I noticed that apollo Mutation components have an onCompleted callback, but I don't know how to use this callback to fire off

Apollo mutate calling update four times for a single mutation

阅读更多关于 Apollo mutate calling update four times for a single mutation

Every time I add a new item in my app, the mutation calls update() four times, for some reason. The first two are optimistic data, and in the second batch, one is optimistic and one is real data from the network. I can't make any sense of this. The new item being created shows up twice on the page. This is my mutation: mutation CreateTrack($name: String!, $trackNum: Int, $s3Key: String!) { createTrack(name: $name, trackNum: $trackNum, s3Key: $s3Key) { trackId name createdAt duration trackNum s3Key isProcessing didProcessingFail } } And this is the mutation code: createTrack({ name, s3Key }) {

Remove unnecessary fields before mutation in GraphQL

阅读更多关于 Remove unnecessary fields before mutation in GraphQL

问题 I've got a type called Article in my schema: type Article { id: ID! updated: DateTime headline: String subline: String } For updates to it, there's a corresponding input type that is used by a updateArticle(id: ID!, article: ArticleInput!) mutation: input ArticleInput { headline: String subline: String } The mutation itself looks like this: mutation updateArticle($id: ID!, $article: ArticleInput!) { updateArticle(id: $id, article: $article) { id updated headline subline } } The article is

Reactjs/Apollo/AppSync Mutation triggered twice

阅读更多关于 Reactjs/Apollo/AppSync Mutation triggered twice

问题 I'm having an issue with React/Apollo/AppSync with mutations triggering twice (or more). I have a React app that has an update mutation triggered by the usual UI button onClick. <button className={`btn btn-sm`} onClick={(event) => { that.toggleSubscription(event, subscriptionid, serviceid, status); }}> <i className={`fas ${icon} fa-fw`} /> {title} </button> The toggleSubscription function looks like this: toggleSubscription = async (event, subscriptionid, serviceid, currentStatus) => { event

How to write to apollo cache from within React component with out losing context of “this”

阅读更多关于 How to write to apollo cache from within React component with out losing context of “this”

问题 I'm having trouble trying to read from apollo cache from within a react component the mutation works and writes to my server and returns the data but when passed to my update function it seems to lose the context of this when in inMemoryCache.js "apollo-cache-inmemory": "^1.2.5" "react-apollo": "^2.1.4" "apollo-boost": "^0.1.7" TypeError: Cannot read property 'read' of undefined at ./node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.readQuery import React, { Component }