react-apollo | 易学教程

Modeling optional filter params in react-apollo

阅读更多关于 Modeling optional filter params in react-apollo

问题 I am using react-apollo to access a graphql in a web app. I have a query that looks like this that allows me to filter a schedule of games: query($pagination:Int!, $divisionId:ID, $teamId:ID, $startDate:DateTime!, $endDate:DateTime! ){ games: allGames ( orderBy: date_ASC, first: $pagination, filter: { date_gte: $startDate, date_lte: $endDate, division: {id: $divisionId}, OR: [ {homeTeam: {id: $teamId} }, {awayTeam: {id: $teamId} }, ] } ){ id .... more fields } The startDate and endDate

How to share cached apollo-client data with another query

阅读更多关于 How to share cached apollo-client data with another query

问题 I'm using apollo-client@2.3.x (& react-apollo@2.1.x ), with the standard InMemoryCache , to query a Shopify store via their GraphQL Storefront API. I have two queries: 1. getProducts (in <Home /> ), and 2. getProduct($id) (in <ProductDetail /> ). In the scenario starts on <Home /> , then clicks on a product, I'd like the <ProductDetail /> component to show the cached response from query 1 before query 2 runs. Demo: https://shopify-storefront-example-rdfwtslzng.now.sh/ Source: https://shopify

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

React Apollo and Redux: Combine custom reducers with Apollo state

阅读更多关于 React Apollo and Redux: Combine custom reducers with Apollo state

问题 When using react-apollo with redux, data from the server is cached in the redux store under an apollo key: { apollo: // results from Apollo queries } After creating your own reducers and corresponding state tree, your store might look like this: { apollo: { ... }, ui: { selectedItem: 2; showItems: 6 } } Imagine that there is an action which changes the value of ui.selectedItem , and that this value is the index of an item buried somewhere in the apollo object. With reducer composition,

How to define props interface for Apollo's React HOC?

阅读更多关于 How to define props interface for Apollo's React HOC?

问题 I am trying to use Apollo's React HOC to fetch and pass data to my component, but I'm getting an error of: Argument of type 'typeof BrandList' is not assignable to parameter of type 'CompositeComponent<{ data?: QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; }>'. Type 'typeof BrandList' is not assignable to type 'StatelessComponent<{ data?: QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; }>'. Type 'typeof BrandList' provides no match for the signature '(props: {

How do I update the Apollo data store/cache from a mutation query, the update option doesn't seem to trigger

阅读更多关于 How do I update the Apollo data store/cache from a mutation query, the update option doesn't seem to trigger

问题 I have a higher order component in my react native application that retrieves a Profile. When I call an "add follower" mutation, I want it to update the Profile to reflect the new follower in it's followers collection. How do I trigger the update to the store manually. I could refetch the entire profile object but would prefer to just do the insertion client-side without a network refetch. Currently, when I trigger the mutation, the Profile doesn't reflect the change in the screen. It looks

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.preventDefault(); event.stopPropagation(); if (currentStatus === "mandatory") return; console.log

Reactjs/Apollo/AppSync Mutation Optimistic Response Resolved ID

阅读更多关于 Reactjs/Apollo/AppSync Mutation Optimistic Response Resolved ID

问题 So first off I will start by saying I added an optimistic response to my mutation so it would it stop producing duplicates as referenced here and from this previous S.O. question. So that is all working but I have a set of dependant mutations that run after the first using async await. submitForm = async () => { // Only submit if form is complete if (!this.state.saveDisabled) { try { // Optimistic Response is necessary because of AWS AppSync // https://stackoverflow.com/a/48349020/2111538

GraphQL Query Runs Sucessfully One Time and Fails To Run Again using Apollo and AWS AppSync

阅读更多关于 GraphQL Query Runs Sucessfully One Time and Fails To Run Again using Apollo and AWS AppSync

I'm using the basic client configuration from the example on the first page of https://github.com/awslabs/aws-mobile-appsync-sdk-js repo: const client = new AWSAppSyncClient({ url: appSyncConfig.graphqlEndpoint, region: appSyncConfig.region, auth: { type: appSyncConfig.authenticationType, apiKey: appSyncConfig.apiKey, } }); But without the <Rehydrated> component, and with a Redux <Provider> component. The highest level parent component is wrapped like this: <Provider store={store}> <ApolloProvider client={client}> <App/> </ApolloProvider> </Provider> I've tried swapping the order for the

Dynamic mutation document for react-apollo

阅读更多关于 Dynamic mutation document for react-apollo

问题 I need to change my mutation document dynamically to be able to create multiple items in a single mutation. So I have this function createOrderName that takes an integer and be able to create the correct mutation document. Eg. createOrderName(2) gets mutation createOrderMut($input0: AddToOrderMenuItemConnectionInput!, $input1: AddToOrderMenuItemConnectionInput!) { input0: addToOrderMenuItemConnection (input:$input0) { changedOrderMenuItem { id } } input1: addToOrderMenuItemConnection (input: