Apollo Refetch Query Component with new Variables

Question

So I have this Apollo Query Component like this:

<Query
    fetchPolicy='network-only' // also tried without and with 'no-cache'
    query={GET_MENUS}
    variables={{
        foo // This has the default value of the state
    }}
>
    {({ loading, error, data, refetch }) => {

      // Display Data here

      // We have an Imput here that can change the State of Bar in the parent Component
      <Button
          onPress={() => {
              /*refetch({
                  foo: { bar}
              }); */
              setBar(blubb); // I am using react hooks (useState)
          }}
          text='Refresh!'
      />
      }
    )}
</Query>

I tried to refetch by using the refetch method and also by just updating the state. Actually I checked the Apollo Server and in both methods the new variables get passed, but the new Data is not updated. The funny thing is, that if I just use another default value in the state, it works fine. I also tried different fetch-policies without any luck.

I thought it should be quite basic, but I didn't find any solution so far...

So how do I get data with my new variables?

EDIT:

GET_MENUS is a bit complicated, but this is the whole thing. I am passing the variables into different resolvers, because they are nested. The Foo Bar thingy is the "daily" variable

const GET_MENUS = gql`
    query getMenus($lat: Float!, $lng: Float!, $daily: Daily) {
        getMenus(lat: $lat, lng: $lng) {
            distance
            location {
                _id
                street
                streetNumber
                plz
                city
                coordinates
                shopIDs {
                    name
                    togo
                    shopType
                    menus(daily: $daily) {
                        _id
                        name
                        price
                        hot
                        sweet
                        togo
                        allergies
                        components
                    }
                }
            }
        }
    }
`;

Sounds like a caching issue. Can you edit your question to show the value of GET_MENUS? — Daniel Rearden
For those who wonder. Apollo has no bug there. It was my fault, because I had another filtering function inside of the Query Component where I have the condition if (prepping && !loading) and all I forgot was to set prepping to true before refetching and everything works. Thanks and sorry... :) — Saigo

Unknown Unknown · Accepted Answer · 2020-09-26T05:50:27

My solution to refetch using variables in Apollo 3.0:

import { gql, useApolloClient } from "@apollo/client";

const client = useApolloClient();

const SEARCH_PROJECTS = gql``

await client.query({
          query: SEARCH_PROJECTS,
          variables: { page: 1, limit: 1 },
          notifyOnNetworkStatusChange: true,
          fetchPolicy: "network-only"
})

See more about the fetch policy here and here.

My context was the following: I fetch a list of projects, then the user can remove or update the projects. The list of projects, the project, the update and delete are different components. The default refresh provided by Apollo doesn't allow me to send the variables for the project' pagination, so when I remove or update a project I refresh it manually, without the need to create a structure where I can use the refresh or fetch more option from the component "list of projects"

Apollo Refetch Query Component with new Variables

1 Answers