每次在react-apollo和graphql中调用组件时如何将查询重新发送到服务器

Question

I have this project, kinda like Facebook. The idea is, when a user is in their profile page, they should see a list of their friends' usernames. Upon clicking on each username, the app is taking the id of that person from the url, then sending a graphql query to the server, to fetch all relevant details of that person. Below is the method that gets called when a user clicks on the username of any friend. This works as expected:

onClickFriend(e) {
    e.preventDefault()
    this.props.history.push(`/friends/${ e.target.id}`)
}

Then in the component that handles the url visited by the user (ie the component to show friends profile) contains the following code:

import React from 'react'
import PostsColumn from "./posts/PostsColumn"
import NewPostForm from "./posts/NewPostForm"
import {fetchFriendProfile} from "../queries/queries"
import {graphql} from 'react-apollo'
import {withRouter } from 'react-router'

const FriendProfile=({data})=>{
    const {loading, error, fetchFriendProfile} = data
    if (loading) return <p>Loading...</p>
    if (error) return <p>{error}(</p>

    const {username, birthday, profile_picture} = fetchFriendProfile
    return (
        <div className="row">
            <div className="col-sm-3">
                <br/>

                <img src={`/uploads/${profile_picture}`} alt="Profile picture" width="200" height="200"/>
                <ul>
                    <li>{username}</li>
                    <li>{new Date(birthday).toDateString()}</li>
                </ul>
            </div>
            <div className="col-sm-6">
                <br/>
                <br/>
                <div className="content-feed">
                    <NewPostForm/>
                </div>

                {/*<PostsColumn />*/}
            </div>


        </div>
    )
}
export default graphql(fetchFriendProfile)(withRouter(FriendProfile))

And the graphql query is:

import {gql} from 'apollo-boost'
const fetchPalPosts = gql`
  {
 fetchFriendPosts(id:"${window.location.pathname.split('/')[2]}") {
    username
    birthday
    profile_picture
    }
    }
    `
export { fetchFriendProfile}

At first when the site loads, I see the list of usernames of all my friends, and clicking on any user the first time, I get all the relevant details. However, when I go back and click on another user, this profile component gives me the profile details of the first user I clicked. The url is changing to reflect the id of this new clicked person, but the component does not display the correct details. Only when I reload the page that I get the correct details. Doing some debugging I realize that a query to the server is not even being made when I click any of these usernames as from the second time on wards. Only when I reload the page is when the query is being made. I need help to know how to resend queries to server every time a component is called in react-apollo and graphql. (Am a beginner to graphql)

Answer 1

In addition to the query, the graphql HOC accepts a configuration object as its second parameter that allows you to fine-tune how your query behaves. You can, for example, define the fetchPolicy which determines how Apollo uses the cache. By default, when fetching the same query, Apollo will hit the server the first time and then use the cache for subsequent calls (this is called cache-first ). If you want your component to always hit the request when it mounts, you can set the fetch policy to network-only :

export default graphql(fetchFriendProfile, {
  options: (props) => ({
    fetchPolicy: 'network-only',
  }),
})(withRouter(FriendProfile))

You can read more about fetch policies here .

That said, you don't need to change the fetch policy to achieve your desired behavior. Part of the problem is that you're effectively hardcoding the id input -- instead, you should be passing in any dynamic inputs as variables with each query. That means your query needs to look something like this:

# Note: the actual type for $id will have to match your schema!
query WhateverNameYouLike ($id: ID!){ 
  fetchFriendPosts(id: $id) {
    username
    birthday
    profile_picture
  }
}

Then you can pass in your variable like this:

export default graphql(fetchFriendProfile, {
  options: (props) => ({
    variables: {
      id: window.location.pathname.split('/')[2],
    },
  }),
})(withRouter(FriendProfile))

Side note: it looks like you're also using React Router, so you should be able to grab the id from match.params instead of parsing the location yourself. Read more here .

Lastly, it's important to realize that Apollo normalizes the data it caches -- and it relies on the data's id (or _id ) property to do so. So if you want the cache-first behavior to work as expected, you need to either a) make sure you always request the id field in your queries, or b) tell Apollo to use a different field as the id by configuring InMemoryCache accordingly. It sounds like you already have an id field, so it's simple enough to modify your query to include it:

query WhateverNameYouLike ($id: ID!){ 
  fetchFriendPosts(id: $id) {
    id
    username
    birthday
    profile_picture
  }
}

You can read more about cache normalization and how to use dataIdFromObject to customize InMemoryCache's default behavior here .